＜router-view＞ 中key和name属性的用法详解以及案例

在Vue.js框架中，<router-view> 是一个内置组件，用于渲染路由匹配到的组件。key 和 name 属性是 <router-view> 组件的两种属性，它们有不同的用途和作用。

key 属性

key 属性主要用于Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种尽可能高效的方法更新渲染的元素。这通常会尽量复用已有元素而不是从头开始渲染。而如果你指定了一个key，那么Vue会根据keys来管理元素，并且确保它们总是精确地匹配。
在路由视图中使用key属性通常有以下用途：

• 防止复用：当路由参数发生变化时，有时我们不希望组件被复用，而是重新创建。这时，我们可以通过给 <router-view> 设置一个动态的 key（比如使用路由的fullPath），这样每次路由变化时key都会变，从而触发组件的重新渲染。
  案例：

<template>
  <router-view :key="$route.fullPath"></router-view>
</template>

在这个案例中，每次路由变化（即使参数变化）都会导致 <router-view> 的 key 变化，从而使得组件会重新渲染。

name 属性

name 属性在 <router-view> 中不是特别常用，但可以用来指定一个命名视图。在Vue Router中，你可以给路由配置多个命名视图，然后在父级组件中用相应名称的 <router-view> 来渲染它们。
案例：
假设我们有以下路由配置：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      components: {
        default: UserHome, // 默认视图
        sidebar: UserSidebar // 命名视图
      }
    }
  ]
})

然后，在父级组件中，你可以这样使用命名视图：

<template>
  <div>
    <router-view></router-view> <!-- 默认视图 -->
    <router-view name="sidebar"></router-view> <!-- 命名视图 -->
  </div>
</template>

在这个案例中，UserHome 组件将会渲染在默认的 <router-view> 中，而 UserSidebar 组件将会渲染在 name="sidebar" 的 <router-view> 中。
总结：

• key 属性用于控制组件的复用逻辑，通常与路由的参数或路径结合使用。
• name 属性用于指定命名视图，这在有多个视图需要同时渲染时非常有用。

原文地址：https://blog.csdn.net/qq_38519364/article/details/144331477

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！