Vue background management system, dynamically add routes, route duplicates
when adding routes dynamically using vue-router "s addRoutes, the child routes are duplicated.
Click
, and the routing address becomes" http://localhost:8123/-sharp/workerType", but it shows" employee list"
Click "employee list", the routing address changes to" employee list, and the route address is still displayed as" employee list"
.
Click on the "student type", the route address becomes" http://localhost:8123/-sharp/studentType, but it displays the "student list"
click on the "student list", the route address changes to" http://localhost:8123/-sharp/studentList address, and the route address is still displayed as the "student list"
.
key code:
var menuData = [
{
path: "",
componentPath: "/layout/index",
text: "",
children: [
{path: "/index", componentPath: "/homepage/index", text: ""}
]
},
{
path: "/worker",
componentPath: "/layout/index",
text: "",
children: [
{path: "/workerType", componentPath: "/workersSystem/workerType", text: ""},
{path: "/workerList", componentPath: "/workersSystem/workerList", text: ""}
]
},
{
path: "/student",
componentPath: "/layout/index",
text: "",
children: [
{path: "/studentType", componentPath: "/studentSystem/studentType", text: ""},
{path: "/studentList", componentPath: "/studentSystem/studentList", text: ""}
]
},
{
path: "/college",
componentPath: "/layout/index",
text: "",
children: [
{path: "/collegeList", componentPath: "/collegeSystem/collegeList", text: ""}
]
}
]
//
tools.setStore("menuData", JSON.stringify(menuData));
// --_-
tools.setStore("rootList", JSON.stringify(tools.getRootList(menuData)));
// getRoutescomponent
var routes = tools.getRoutes(menuData);
// router:beforeEach
this.$router.addRoutes(routes);
this.$router.push("/index");
tools.js file
getRoutes (menu) {
var rootRoute = "";
if ( !menu || menu.length <= 0 ) {
return [];
}
for ( var i = 0; i < menu.length; iPP ) {
var item = menu[i];
item.component = () => import(`@/views${item.componentPath}`);
if ( item.children && item.children.length > 0 ) {
item.children = this.getRoutes(item.children);
}
}
console.log(menu);
return menu;
},
is it the wrong introduction of component in getRoutes?
github address: https://github.com/sunshineTY.
backend system login account: 1 password: 1
children: [
{path: '/workerType', componentPath: '/workersSystem/workerType', text: ''},
{path: '/workerList', componentPath: '/workersSystem/workerList', text: ''}
]
second-level routing path does not need to add /
I am also a novice in routing, but I see a problem. See if this is the problem. All your path under children: "workerType" is written like this, because your route does not match, and the last one is displayed by default. This is the routing method of the official website
.
agree to the routing in children path remove /
in addition, do you take a closer look at whether the content of the component corresponding to your child route is correct?
I think this is the problem introduced by import, but I still don't know why. Now I have found another way to solve the problem.
create a Components.js file to specifically introduce the component, and then store the component name in the dynamic routing instead of the component path, and bind the corresponding component in the Components.js through the component name.
Components.js
export default {
Layout: () => import('@/views/layout/index'),
index: () => import('@/views/homepage/index'),
workerType: () => import('@/views/workerSystem/workerType'),
workerList: () => import('@/views/workerSystem/workerList'),
studentType: () => import('@/views/studentSystem/studentType'),
studentList: () => import('@/views/studentSystem/studentList'),
collegeList: () => import('@/views/collegeSystem/collegeList')
}
login.vue
var menuData = [
{
path: '',
componentName: 'Layout',
text: '',
hidden: true,
children: [
{path: '/index', componentName: 'index', text: ''}
]
},
{
path: '/worker',
componentName: 'Layout',
text: '',
children: [
{path: '/workerType', componentName: 'workerType', text: ''},
{path: '/workerList', componentName: 'workerList', text: ''}
]
},
{
path: '/student',
componentName: 'Layout',
text: '',
children: [
{path: '/studentType', componentName: 'studentType', text: ''},
{path: '/studentList', componentName: 'studentList', text: ''}
]
},
{
path: '/college',
componentName: 'Layout',
text: '',
children: [
{path: '/collegeList', componentName: 'collegeList', text: ''}
]
}
]
//
tools.setStore('menuData', JSON.stringify(menuData));
// --_-
tools.setStore('rootList', JSON.stringify(tools.getRootList(menuData)));
// getRoutescomponent
var routes = tools.getRoutes(menuData);
// router:beforeEach
this.$router.addRoutes(routes);
this.$router.push('/index');
tools.js
import Components from '../router/Components.js'
getRoutes (menu) {
var rootRoute = '';
if ( !menu || menu.length <= 0 ) {
return [];
}
for ( var i = 0; i < menu.length; iPP ) {
var item = menu[i];
// import
// item.component = () => import(`@/views${item.componentPath}`);
if ( item.componentName in Components ) {
item.component = Components[item.componentName];
} else {
item.component = null;
}
if ( item.children && item.children.length > 0 ) {
item.children = this.getRoutes(item.children);
}
}
return menu;
},
