【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(){
// 写入需要监听路由便后后的逻辑
}
},
},
不同菜单页面没有
- 如果采用上面第一个刷新路由的方法会全屏刷新,显然这样写在实际开发中肯定是不行的。
- 使用第二种方法页面内容确实改变当前路由页面,但是由于我在不同菜单目录里引用同一个页面。vue路由认为当前同一个页面不会进行页面刷新,router-view不会按照新页面来切换,只需要给router-view绑定一个唯一的key就行了,这里正好可以通过不同路径来区分。
<router-view :key='$route.fullPath'>
洗尽铅华始见金,褪去浮华归本真