報錯:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...
在使用this.$router.push跳轉(zhuǎn)頁面時候,重復(fù)點擊菜單引起路由重復(fù)報錯
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. 如果使用模塊化機制編程,導(dǎo)入Vue和VueRouter,要調(diào)用 Vue.use(VueRouter)
// 1. 定義 (路由) 組件。
// 可以從其他文件 import 進來
// 2. 定義路由
// 每個路由應(yīng)該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器,
// 或者,只是一個組件配置對象。
// 我們晚點再討論嵌套路由。
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: "權(quán)限管理",
// 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. 創(chuàng)建 router 實例,然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
const router = new VueRouter({
routes // (縮寫) 相當于 routes: routes
})
// 4. 創(chuàng)建和掛載根實例。(在main.js里繼續(xù)掛載)
// 記得要通過 router 配置參數(shù)注入路由,
// 從而讓整個應(yīng)用都有路由功能
// 解決重復(fù)點擊導(dǎo)航時,控制臺出現(xiàn)報錯
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}
export default router