如图所示,当在同一页面改变路由参数时,页面会出现不刷新的情况。
解决方法
一、使用watch属性监听route对象
watch: {
$route(to, from) {
// 对路由变化作出响应...
//可以使用$router.go(0)进行刷新,(补充,该方法在ios手机上无效)
//可以改用window.location.reload()
}
二、设置router-view中的key属性,附带上参数值
<router-view :key="$route.name + ($route.params.id || '')"></router-view>
三、使用beforeRouteUpdate
导航守卫
// 全局导航守卫
router.beforeEach((to, from, next) => {
if (to.name === from.name && to.params.type !== from.params.type) {
next({name: 'empty', query: {toPath: to.fullPath}})
} else {
next()
}
})
// 中间过渡路由
let toPath = this.$route.query.toPath
if (this.toPath) {
this.$router.push({path: this.toPath})
}