<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 并不⼀样,所以组件被强制不复⽤。
标签:Vue,key,组件,router,page,路由,view From: https://www.cnblogs.com/roland-sky/p/17520674.html