动态路由页面切换的问题解决及NavigationDuplicated报错处理
程序员文章站
2022-04-19 07:56:05
...
动态路由页面切换的问题及解决
动态路由:适用于页面结构相似,数据不同,大量重复的情况.使得url地址可以变化,多个地址对应同一个组件,达到复用的目的
使用动态路由:
- 修改路由
path: '/goodsDetail/:id'
,:id
表示id的值是一个变量 - 跳转页面时,遵循路由的格式
<router-link :to="'/productDetail/'+id+'/'+name+'/'+price">xx</router-link>
或者:
this.$router.push('/productDetail/'+id+'/'+name+'/'+price);
3. 获取动态路由的参数`$route.params.xxx`
出现的问题描述:
点击切换路由,能改变路由也没能拿到数据,但页面不会发生改变,需要手动刷新之后,页面才会切换到想要的内容。
出现问题的原因:
原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
解决方法:
- 使用watch和路由守卫
watch: {
// 监听当前路由对象的改变
$route: {
handler(newV, oldV) {
console.log(newV, oldV);
console.log('我请求了'+newV.params.id+'的数据');
}
}
}
路由守卫:在页面跳转时,提供拦截处理的功能。通常用于权限校验和登录判断等。
1. 根据作用范围的大小,分为全局守卫、路由独享的守卫和组件内的守卫。
2. 根据作用顺序的前后,分为前置守卫、解析守卫、后置守卫等。
3. 全局守卫:每次页面跳转都会触发,无论哪个页面都会触发.代码写在路由的index.js
或者main.js
中。
// 组件内的守卫-路由更新
// 全局前置守卫,写在main.js或者router/index.js中
beforeRouteUpdate(to, from, next) {
// to:下一个页面的路由对象,即将进入的那个页面
// from:当前页面的路由对象,正在离开的这个页面
console.log('我请求了'+to.params.id+'的数据');
next()
}
ps:重复点击跳转同一个地址,浏览器可能会报的错
NavigationDuplicated: Avoided redundant navigation to current
location.
解决方法:
// 解决:NavigationDuplicated: Avoided redundant navigation to current location.捕获错误
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}