1. When clicking navigation repeatedly, an error message appears on the console
Solution:
Option 1: Just add the following code under the router folder:
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. If you use the modular mechanism to program and import Vue and VueRouter, call Vue.use(VueRouter)
// 1. Define (routing) component.
// Can be imported from other files
// 2. Define routing
// Each route should map a component. where "component" can be
// Component constructor created through Vue.extend(),
// Or, just a component configuration object.
// We'll discuss nested routing later.
const routes = [
// //Main route
{
path: '/',
component: Main,
redirect:"home",
children: [//Sub routes, nested routes
{
path: 'home',
component: Home
},
{
path: 'user',
component: User
},
{
path: "/acl/user",
name: "user",
title: "User Management",
icon: "setting",
component: () => import("@/views/acl/user/List.vue"),
},
{
path: "/acl/role",
name: "role",
title: "Role Management",
icon: "setting",
component: () => import("@/views/acl/role/List.vue"),
},
{
path: "/acl/menu",
name: "menu",
title: "Menu Management",
icon: "setting",
component: () => import("@/views/acl/menu/List.vue"),
}
// ,
// {
// title: "Permission Management",
// icon: "s-order",
// name: "/acl",
// path: '/acl',
// children: [
// {
// path: "/user1",
// name: "user",
// title: "User Management",
// icon: "setting",
// component: () => import("@/views/acl/user/List.vue"),
// },
// {
// path: "/acl/role",
// name: "role",
// title: "Role Management",
// icon: "setting",
// component: () => import("@/views/acl/role/List.vue"),
// },
// {
// path: "/acl/menu",
// name: "menu",
// title: "Menu Management",
// icon: "setting",
// component: () => import("@/views/acl/menu/List.vue"),
// },
// ],
// },
]
},
]
// 3. Create a router instance and pass the `routes` configuration
// You can also pass other configuration parameters, but let's keep it simple for now.
const router = new VueRouter({
routes // (abbreviation) equivalent to routes: routes
})
// 4. Create and mount the root instance. (Continue to mount in main.js)
// Remember to inject routes through the router configuration parameters.
// So that the entire application has routing functionality
// Solve the problem that an error occurs in the console when clicking navigation repeatedly
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}
export default router
Option 2: Use the catch method to catch router.push exceptions.
this.$router.push(route).catch(err => {
console.log('Output error',err)
})
Option 3: When jumping, determine whether the jump route is consistent with the current route to avoid problems caused by repeated jumps.
index routing file
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. If you use the modular mechanism to program and import Vue and VueRouter, call Vue.use(VueRouter)
// 1. Define (routing) component.
// Can be imported from other files
// 2. Define routing
// Each route should map a component. where "component" can be
// Component constructor created through Vue.extend(),
// Or, just a component configuration object.
// We'll discuss nested routing later.
const routes = [
// //Main route
{
path: '/',
component: Main,
redirect:"home",
children: [//Sub routes, nested routes
{
path: 'home',
component: Home
},
{
path: 'user',
component: User
},
{
path: "/acl/user",
name: "user",
title: "User Management",
icon: "setting",
component: () => import("@/views/acl/user/List.vue"),
},
{
path: "/acl/role",
name: "role",
title: "Role Management",
icon: "setting",
component: () => import("@/views/acl/role/List.vue"),
},
{
path: "/acl/menu",
name: "menu",
title: "Menu Management",
icon: "setting",
component: () => import("@/views/acl/menu/List.vue"),
}
// ,
// {
// title: "Permission Management",
// icon: "s-order",
// name: "/acl",
// path: '/acl',
// children: [
// {
// path: "/user1",
// name: "user",
// title: "User Management",
// icon: "setting",
// component: () => import("@/views/acl/user/List.vue"),
// },
// {
// path: "/acl/role",
// name: "role",
// title: "Role Management",
// icon: "setting",
// component: () => import("@/views/acl/role/List.vue"),
// },
// {
// path: "/acl/menu",
// name: "menu",
// title: "Menu Management",
// icon: "setting",
// component: () => import("@/views/acl/menu/List.vue"),
// },
// ],
// },
]
},
]
// 3. Create a router instance and pass the `routes` configuration
// You can also pass other configuration parameters, but let's keep it simple for now.
const router = new VueRouter({
routes // (abbreviation) equivalent to routes: routes
})
// 4. Create and mount the root instance. (Continue to mount in main.js)
// Remember to inject routes through the router configuration parameters.
// So that the entire application has routing functionality
// Solve the problem that an error occurs in the console when clicking navigation repeatedly
// const VueRouterPush = VueRouter.prototype.push
// VueRouter.prototype.push = function push (to) {
// return VueRouterPush.call(this, to).catch(err => err)
// }
export default router
Menu component
<template>
<div class="hello">
<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
<el-radio-button :label="false">Expand</el-radio-button>
<el-radio-button :label="true">Collapse</el-radio-button>
</el-radio-group> -->
<el-menu
default-active="1-4-1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<!-- Loop menu data -->
<label v-for="item in menuData" :key="item.name">
<!-- Determine whether there is a submenu, if so, create submenu, if not, create menu-item -->
<el-submenu
:index="item.name"
v-if="item.children"
@click="clickMenu(item)"
>
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span>{<!-- -->{ item.title }}</span>
</template>
<label>
<!-- Call yourself -->
<CommonAsideMenuTRee
:menuData="item.children"
></CommonAsideMenuTRee>
</label>
</el-submenu>
<el-menu-item v-else :index="item.name" @click="clickMenu(item)">
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span>{<!-- -->{ item.title }}</span>
</template>
</el-menu-item>
</label>
<!-- <el-menu-item
v-for="item in noChildren"
:key="item.name"
index="item.name"
>
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{<!-- -->{ item.label }}</span>
</el-menu-item>
<el-submenu
v-for="item in hasChildren"
:key="item.name"
index="item.name"
>
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{<!-- -->{ item.label }}</span>
</template>
<el-menu-item-group v-for="child in item.children" :key="child.name">
<el-menu-item index="child.name">{<!-- -->{ child.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu> -->
</el-menu>
</div>
</template>
<script>
import CommonAsideMenuTRee from "@/components/CommonAsideMenuTRee.vue";
export default {
name: "CommonAsideMenuTRee",
components: {
CommonAsideMenuTRee,
},
props: {
menuData: {
type: Array,
},
},
data() {
return {
isCollapse: false,
menuList1: [
{
path: "/user",
name: "user",
label: "User Management",
icon: "user",
url: "UserManage/UserManage",
},
{
path: "/",
name: "Main",
label: "Home",
icon: "s-home",
url: "Main/Main",
},
{
label: "Permission Management",
icon: "s-order",
name: "acl",
component: "",
path: "",
children: [
{
path: "/acl/user",
name: "user",
label: "User Management",
icon: "setting",
component: () => import("@/views/acl/user/List.vue"),
},
{
path: "/acl/role",
name: "role",
label: "Role Management",
icon: "setting",
component: () => import("@/views/acl/role/List.vue"),
},
{
path: "/acl/menu",
name: "menu",
label: "Menu Management",
icon: "setting",
component: () => import("@/views/acl/menu/List.vue"),
},
],
},
],
};
},
computed: {
//No submenu
noChildren() {
return this.menuList.filter((item) => !item.children);
},
//There is a submenu
hasChildren() {
return this.menuList.filter((item) => {
return item.children;
});
},
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
//Click on the menu to jump to the route
clickMenu(item) {
console.log("this.$route.path ==== " + this.$route.path);
console.log("item.path =========== " + item.path);
console.log("--------------------------------------------- ----");
// Determine whether the jump route is consistent with the current route to avoid problems caused by repeated jumps
// Jump only when the route of the page is inconsistent with the route of the jump
if(this.$route.path !== item.path & amp; & amp; !(this.$route.path === '/home' & amp; & amp; item.path === '/' )){
this.$router.push(item.path)
}
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-menu {
// height: 100vh;
border-right: none;
}
</style>
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill tree Home page Overview 39469 people are learning the system