【vue-router】动态组件中通过路由参数来多次调用同一个页面中遇到的坑

vue2 router的几个坑总结

需求：vue2 动态路由中不同菜单目录引用同一个组件页面，通过给接口传入不同的参数来区分页面。

vue通过切换路由如果仅仅query或者params参数发生变化，这时候能看到地址栏的url地址确实发生了变化，但是页面数据就是没刷新。

// query参数

http://localhost:8080/index?type=1

http://localhost:8080/index?type=2

// params参数

http://localhost:8080/index/1

http://localhost:8080/index/2

这时候页面需要手动监听路由变化，手动刷新（注意这种方法刷新的是整个页面），并且这种方法和我的需求不相关

watch: {
 '$route' (to, from){
	 this.$router.go(0);
	 }
},

但是我的需要是，在动态路由里根据不同路由参数，在不同菜单目录里引用同一个页面，所以我需要写成下面这种形式，页面内容的确变化了。

watch: {
    $route:{
        immediate:true,
        handler(){
            // 写入需要监听路由便后后的逻辑
        }
    },
},

不同菜单页面没有

1. 如果采用上面第一个刷新路由的方法会全屏刷新，显然这样写在实际开发中肯定是不行的。
2. 使用第二种方法页面内容确实改变当前路由页面，但是由于我在不同菜单目录里引用同一个页面。vue路由认为当前同一个页面不会进行页面刷新，router-view不会按照新页面来切换，只需要给router-view绑定一个唯一的key就行了，这里正好可以通过不同路径来区分。

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