Vue中如何给router-view设置key值

key的作用

由于 Vue 会复用相同组件, 所以当同一个组件不同路由发生跳转时将不在执行created, mounted之类的钩子函数 , 设置key之后会在虚拟DOM阶段比对跳转前后得key值,如果不同则重新销毁重建页面。

key的属性值

key属性值为 $route.path

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

1. 当路由地址变化为 /category/sub1 ⇒ /category/sub2时

由于这两个路由的$route.path不一样, 所以组件被强制重新加载

相关钩子加载顺序为 : beforeRouteUpdate ⇒ created ⇒ mounted

2. 当路由地址变化为 /category/sub?id=1 ⇒ /category/sub?id=1时

由于这两个路由的$route.path一样, 所以组件被复用, 不重新加载

相关钩子加载顺序为 : beforeRouteUpdate

key属性值为 $route.fullPath

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

1. 当路由地址变化为 /category/sub1 ⇒ /category/sub2时

2. 当路由地址变化为 /category/sub?id=1 ⇒ /category/sub?id=1时

这两种情况由于这两个路由的$route.fullPath都不一样, 所以组件被强制重新加载

相关钩子加载顺序为 : beforeRouteUpdate ⇒ created ⇒ mounted