报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...
在使用this.$router.push跳转页面时候,重复点击菜单引起路由重复报错
1 只需在 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