当前位置：首页 > article >正文

电影系统1-MovieStrip.vue

article 2024/12/26 23:40:27

那么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 的优势。