那么slot在这的作用到底是让父组件在子组件插入内容还是复用呢
一个超大div包含两个div
<a :href="`/movie/info/${movie.id}`">
为什么地址不直接是${movie.id}呢，movie/info/这个地址从何而来呢？1.定义路由，以便在不同的页面或组件之间进行导航。路由配置通常通过设定路径和相应的组件来定义应用程序的导航。每个对象包含多个属性，主要包括
path：路由的 URL 路径。name：路由的名称，可以用于程序内部引用。component：与该路径对应的 Vue 组件。在router文件夹下index.js中定义路由
{
path: 'movie/info/:id',
name: 'movieInfo',
component: () => import('../views/MovieInfoView.vue')
},
//一个点返回上一级目录，两个点返回上一级目录的上一级目录
2.在vue router中使用component 配置时，可以选择两种方式来引入组件直接导入组件：
import MovieInfoComponent from '../views/MovieInfoView.vue';const routes = [{path: '/movie/info/:id',component: MovieInfoComponent // 直接引用组件} ];懒加载（使用动态导入）
const routes = [{path: '/movie/info/:id',component: () => import('../views/MovieInfoView.vue') // 动态导入组件} ];懒加载的好处
- 性能优化：懒加载可以在路由被访问时才加载相应的组件，这样可以减少初始加载时的资源占用，提高页面加载速度。
- 按需加载：尤其在大型应用中，只有访问特定路由时才需要加载相关组件，可以有效减少不必要的资源浪费。
3.路由配置中使用name属性好处
- 为路由提供一个唯一的名称。这样可以在其他地方（如导航、重定向等）通过这个名称来引用该路由
- 动态路由导航：可以使用路由名称进行编程式导航，而不必硬编码路径。
this.$router.push({ name: 'MovieInfo', params: { id: movieId } });- 更改路径时无需修改代码：如果你需要更改某个路由的路径，只需要在路由配置中更新
path，而调用该路由的地方仍然可以使用name，避免了多处修改的麻烦- 在模板中使用，在
<router-link>组件中也可以通过name指定路由
<router-link :to="{ name: 'MovieInfo', params: { id: movieId } }">查看电影信息</router-link>也就是说在当前组件中点击a标签的内容，会跳到href所定的地址的组件中。
为什么还要配置路由呢，要是通过a标签直接跳转到其他组件，在href属性中直接写其他组件的相对地址不就行了吗？为什么还要来通过路由写个地址映射呢?好处，例如：
无刷新导航：通过 Vue Router，用户在不同组件之间切换时不会导致页面的刷新，从而提供更流畅的用户体验。直接使用
<a>标签会导致整个页面重新加载，失去 SPA 的优势。
