Vue router-view key 导致路由切换非router-view部分也进行刷新

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

 

如果中最外层的<router-view>中增加了:key="$route.fullPath", 会导致子路由中的router-view之外的部分也会被重新渲染，key值的使用应该考虑不干扰其他组件渲染的前提下去添加，例如header组件

// 这个是根路由，下面有包含header的子路有，每次切换路由，header都会被同步刷新
<transition name="fade">
　　<router-view :key="$route.fullPath" /> 
</transition>

// 子路由
<Header />
<router-view />

 

key值添加是为了以下几点

1. 不设置 router-view 的 key 属性由于 Vue 会复⽤相同组件，即 /page/a => /page/b 或者 /page?id=a => /page?id=b 这类链接跳转时，将不再执⾏ created ， mounted 之类的钩⼦，这时候你需要在路由组件中，添加beforeRouteUpdate 钩⼦来执⾏相关⽅法拉取数据。

2. 设置 router-view 的 key 属性值为 $route.path从 /page/a => /page/b ，由于这两个路由的 $route.path 并不⼀样，所以组件被强制不复⽤，相关钩⼦加载顺序为 beforeRouteUpdate => created => mounted

3. 设置 router-view 的 key 属性值为 $route.fullPath从 /page/a => /page/a ，由于这两个路由的 $route.fullPath 并不⼀样，所以组件被强制不复⽤，相关钩⼦加载顺序为beforeRouteUpdate => created => mounted

4. 从 /page?id=a => /page?id=b ，由于这两个路由的 $route.fullPath 并不⼀样，所以组件被强制不复⽤。