在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属性用于指定命名视图，这在有多个视图需要同时渲染时非常有用。
