咋解决vue-router重复导航问题？

聊聊vue-router和导航重复的问题

每次弄个单页web应用，咱就得靠vue-router搞定路由了。这货挺厉害的，但有时候也会闹别扭，比如你连点几次同一个路由路径，就可能出错。咋回事儿？因为vue-router觉得你老是想看同样的内容，页面组件加载就容易出问题，所以就用导航守卫防着重复导航，以免网页变得一团糟。

禁用导航守卫的方法

首先，咱们先把vue-router里的导航守卫关了哈。虽然这个能防止咱们走错路，但有时候也挺烦人的。直接在路由设置那儿把它取消勾选就行！

保留导航守卫功能的解决方法

解决”重复导航”问题又要保持导航保护？试试vue-router里面的catch方法！也就是说在这里设置一个false值，就能阻止浏览器再回到原来的页面，从而不再有重复导航了

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

使用replace方法

还有个简单方法，用replace方法来做网页转向呀~这样就能避开导航守卫，直接把页面带到同一个地方。只要在路由跳转时用上这招，每次按同一个路由都会换个新路由，还能防止加载重复的组件，再也不担心导航守卫的问题！

router.beforeEach((to, from, next) => {
  if (to.path === from.path) {
    next(false)
  } else {
    next()
  }
})

常见问题及解决方案选择

遇到”NavigationDuplicated”错误？别慌！试试把导航守卫关掉看看catch或replace的效果。具体选哪个就看你的需求，毕竟各有优缺点。

结语与展望

this.$router.replace(to)

这篇文章帮你了解Vue项目里的”NavigationDuplicated”是啥情况，以及怎么搞定它。还会简单说说vue-router在编程单页Web应用中的重要作用，和如何处理常见的路由问题。相信以后会有更多便捷的工具，帮助我们快速构建出出色的单页应用。