前言

    遇到个需求，要求在同一个path下，通过不同的query实现跳转不同的页面，大概就是下面这个样子:

type为1时用个人信息，type为2时用我的视频。

解决办法

两个方法，推荐用第二种：
方法一：用watch

watch{
	'$router': function(to, from){
		......
	}
}

方法二：在router-view 标签上加":key"

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

这样当全路径变化的时候，就会触发跳转了。

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