image.png
image.png
如圖所示送漠,當在同一頁面改變路由參數(shù)時,頁面會出現(xiàn)不刷新的情況由蘑。
解決方法
一闽寡、使用watch屬性監(jiān)聽route對象
watch: {
$route(to, from) {
// 對路由變化作出響應...
//可以使用$router.go(0)進行刷新,(補充,該方法在ios手機上無效)
//可以改用window.location.reload()
}
二尼酿、設置router-view中的key屬性爷狈,附帶上參數(shù)值
<router-view :key="$route.name + ($route.params.id || '')"></router-view>
三、使用beforeRouteUpdate
導航守衛(wèi)
// 全局導航守衛(wèi)
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})
}