Vue新手福利：解决导航陷阱

大家在用Vue玩儿开发时，总会用到vue-router来实现导航效果。可是，偶尔会碰到个叫“Error:Avoidedredundantnavigationtocurrentlocation”的提示，它说别老是点击同样的链接或者重复使用路由路径。这个问题常常出现在不小心点到同一链接好几次或者出现多个重复的路由路径上。那咋办？得让程序正常跑起来！

使用exact修饰符

编程或定位时记得加个”exact”，这样就准多！除非路径跟你输入的完全一样，否则还是会去那个老地方。比如说，导航要是”/home”的话，那就只能在你现在的路径也是”/home”时才管用。

首页

使用replace属性

有时候，我不想浏览器保存新的上网记录，那就删除以前的那些呗！这里，我们可以用路由器上的replace功能，跟push有点像，都能改变你的网络路径。不过，replace不保存你看过的记录，所以即使你反复点同个网页，也不会有痕迹。

router.replace('/login')

使用beforeRouteUpdate方法

在玩Vue的时候，你有没有试过遇到这种情况：修改了路由路径后，页面却毫无反应，好像什么都没变似的。这时候你该怎么做？别急，我来告诉你个小技巧——使用beforeRouteUpdate这个神奇的钩子函数！当路由发生改变时，它会自动被触发，帮你搞定页面内容的更新，让它们和新路由状态保持同步。这样一来，下次再遇到那个“Error:Avoidedredundantnavigationtocurrentlocation”的提示，你就可以安心地忽略它。

避免重复点击

beforeRouteUpdate (to, from, next) {
  if (to.path === from.path) {
    next(false)
  } else {
    this.$forceUpdate()
    next()
  }
}

想要防止错点？试试这几个小秘诀！首先，别忘了给链接加上disabled属性，这样谁都触发不了连续点击了。其次，设定个限速函数，就算像风一样的速度，一次也只能成功一下。这样一来，错点明显少了不少，用起来也舒心多了。

遇到“Error:Avoidedredundantnavigationtocurrentlocation”不用怕这个提示其实就是告诉你要让路由导航更准确高效些，这样小毛病就能自己消失了，我们的APP也会变得更流畅可靠！

搞定”错误：避免了重叠导航到当前位置”的问题！用完Exact、Replace或者BeforeRouteUpdate就能解决。这样子应用跑起来更快更顺畅！希望这些小窍门对大家也有所帮助噢～欢迎大家给我提出更多建议。