vuerouters这个东西，你知道，它在vue.js中可是个大佬级别的存在，专门负责导航管理这些事儿。但是，有时候老碰到那个“NavigaitionDuplicated”的错误，真是让人头大不已。因为我们总是频繁在同一个路由路径上跳转页面，这可不符合vue的性格呀。你说咋办？别急，我今儿就跟你好好唠唠，看咋整这事。
了解”NavigationDuplicated”错误
VueRouter是靠网址找路的，但要是老是在同一个地方转悠，那它可就要报错，叫”NavigationDuplicated”。这么做就是怕你把路给走乱了，影响功能。
解决方案一：使用try-catch语句
try {
await this.$router.push(myRoute)
} catch (err) {
if(err.name !== 'NavigationDuplicated') {
throw err
}
}
告诉你个小窍门，把你的导航代码放进try-catch里试试看效果咋样？看看在`try`里面使用$router.push()能不能顺利跳转到指定的路由去；要是遇到”NavigationDuplicated”错误，那就让`catch`来搞定剩下的事情！这样一来，就算出现啥问题也不怕了哟~
你这块儿代码，我给它加上了try-catch，这样如果犯了个”NavigationDuplicated”的错，也不用怕，我会帮你抓住并妥善处理，保证你的APP可以正常运行
解决方案二：使用”ignoreDuplicates”属性
搞定VueRouter的重复导航就用“ignoreDuplicates”这个功能！超简单，只要设成”true”就能让VueRouter自动剔除这些烦人的重叠导航了。以后再也不怕遇到”NavigationDuplicated”这样的错误！
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes,
ignoreDuplicates: true,
})
这次咱们就不再把重复的路径设成真的，下次碰到同样的路径也别担心，VueRouter不会犯迷糊。不过，这玩意儿不能乱用，否则路由找不着之类的小问题可就来了。所以，大家要小心呐！
解决方案三：使用生命周期钩子函数
VueRouter的一大优点就是有很多钩子函数，能帮我们轻松解决”NavigationDuplicated”这个问题！比如用beforeEach这个钩子函数，在路由切换前截住它，如果发现要去的新路径跟上一次重复了，那就让VueRouter别去新路径，这么一来就能避开”NavigationDuplicated”的小烦恼。
总结与展望
const router = new VueRouter({
routes: [],
});
router.beforeEach((to, from, next) => {
if(to.path === from.path) {
return false;
}
next();
});
遇到导航重复的问题？Vue.js处理起来可能有点棘手，不过别担心，这里有几个简单实用的方法帮你搞定！试试try-catch语句，设置”ignoreDuplicates”属性，或者利用生命周期钩子函数，这些都能让你轻松应对这个小问题。解决后，你的Vue.js应用会更稳定可靠，给用户带来更好的体验
用VueRouter搭建网页时，千万别忽略了那些可能导致网站崩溃的小毛病！另外，希望下次Vue.js更新能让VueRouter变得更强大，让我们用起来更舒心，编写代码也更加高效！
评论0