Vue中Uncaught (in promise) NavigationDuplicated报错解决求助

这个错误是由于重复触发跳转到当前已激活的路由导致的，以下是几种可行的解决方式：

方法一：全局重写路由push方法 #

在你的路由配置文件中添加代码，捕获路由跳转的Promise异常，避免错误抛出：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'
import Mall from '../views/Mall.vue'
import PageOne from '../views/PageOne.vue'
import PageTwo from '../views/PageTwo.vue'

Vue.use(VueRouter)

// 重写push方法，处理重复导航异常
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const routes = [
  {
    path: '/',
    component: Main,
    redirect:'/home',
    children: [
      { path: 'Home', name:'home', component: Home },
      { path: 'User', name:'user',component: User },
      {path:'Mall', name:'mall',component:Mall },
      {path:'page1',name:'page1',component:PageOne },
      {path:'page2',name:'page2',component:PageTwo },
    ]
  }
]
const router = new VueRouter({
  routes 
})

export default router

方法二：跳转前判断当前路由 #

在触发路由跳转的逻辑中，先判断当前路由是否和目标路由一致，一致则不执行跳转：

// 示例：组件内的跳转方法
goToUser() {
  if (this.$route.path !== '/User') {
    this.$router.push('/User')
  }
}

方法三：跳转时直接捕获异常 #

如果是通过路由name跳转，可以在push后直接添加catch处理异常：

this.$router.push({ name: 'user' }).catch(err => err)

内容的提问来源于stack exchange，提问作者Jasmine