vue.js javascript 前端 ecmascript 前端框架 解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...

一、重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。

解决方案：

方案一：只需在 router 文件夹下，添加如下代码：

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '@/views/Home'

import Main from '@/views/Main'

import User from '@/views/User'

Vue.use(VueRouter)

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。

// 可以从其他文件 import 进来

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

// //主路由

{

path: '/',

component: Main,

redirect:"home",

children: [//子路由，嵌套路由

{

path: 'home',

component: Home

},

{

path: 'user',

component: User

},

{

path: "/acl/user",

name: "user",

title: "用户管理",

icon: "setting",

component: () => import("@/views/acl/user/List.vue"),

},

{

path: "/acl/role",

name: "role",

title: "角色管理",

icon: "setting",

component: () => import("@/views/acl/role/List.vue"),

},

{

path: "/acl/menu",

name: "menu",

title: "菜单管理",

icon: "setting",

component: () => import("@/views/acl/menu/List.vue"),

}

// ,

// {

// title: "权限管理",

// icon: "s-order",

// name: "/acl",

// path: '/acl',

// children: [

// {

// path: "/user1",

// name: "user",

// title: "用户管理",

// icon: "setting",

// component: () => import("@/views/acl/user/List.vue"),

// },

// {

// path: "/acl/role",

// name: "role",

// title: "角色管理",

// icon: "setting",

// component: () => import("@/views/acl/role/List.vue"),

// },

// {

// path: "/acl/menu",

// name: "menu",

// title: "菜单管理",

// icon: "setting",

// component: () => import("@/views/acl/menu/List.vue"),

// },

// ],

// },

]

},

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

routes // (缩写) 相当于 routes: routes

})

// 4. 创建和挂载根实例。(在main.js里继续挂载)

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

// 解决重复点击导航时，控制台出现报错

const VueRouterPush = VueRouter.prototype.push

VueRouter.prototype.push = function push (to) {

return VueRouterPush.call(this, to).catch(err => err)

}

export default router

方案二、使用 catch 方法捕获 router.push 异常。

this.$router.push(route).catch(err => {

console.log('输出报错',err)

})

方案三、在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题。

index路由文件

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '@/views/Home'

import Main from '@/views/Main'

import User from '@/views/User'

Vue.use(VueRouter)

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。

// 可以从其他文件 import 进来

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

// //主路由

{

path: '/',

component: Main,

redirect:"home",

children: [//子路由，嵌套路由

{

path: 'home',

component: Home

},

{

path: 'user',

component: User

},

{

path: "/acl/user",

name: "user",

title: "用户管理",

icon: "setting",

component: () => import("@/views/acl/user/List.vue"),

},

{

path: "/acl/role",

name: "role",

title: "角色管理",

icon: "setting",

component: () => import("@/views/acl/role/List.vue"),

},

{

path: "/acl/menu",

name: "menu",

title: "菜单管理",

icon: "setting",

component: () => import("@/views/acl/menu/List.vue"),

}

// ,

// {

// title: "权限管理",

// icon: "s-order",

// name: "/acl",

// path: '/acl',

// children: [

// {

// path: "/user1",

// name: "user",

// title: "用户管理",

// icon: "setting",

// component: () => import("@/views/acl/user/List.vue"),

// },

// {

// path: "/acl/role",

// name: "role",

// title: "角色管理",

// icon: "setting",

// component: () => import("@/views/acl/role/List.vue"),

// },

// {

// path: "/acl/menu",

// name: "menu",

// title: "菜单管理",

// icon: "setting",

// component: () => import("@/views/acl/menu/List.vue"),

// },

// ],

// },

]

},

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

routes // (缩写) 相当于 routes: routes

})

// 4. 创建和挂载根实例。(在main.js里继续挂载)

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

// 解决重复点击导航时，控制台出现报错

// const VueRouterPush = VueRouter.prototype.push

// VueRouter.prototype.push = function push (to) {

// return VueRouterPush.call(this, to).catch(err => err)

// }

export default router

菜单组件

修改后的截图

推荐链接

 您阅读本篇文章共花了：