vue后台管理系统，动态添加路由，路由重复

Question

使用vue-router的addRoutes动态添加路由时，子路由重复了。

点击‘职工类型’，路由地址变为‘http://localhost:8123/#/workerType’，显示的却是‘职工列表’
点击‘职工列表’，路由地址变为‘http://localhost:8123/#/workerList’，显示的还是‘职工列表’

点击‘学生类型’，路由地址变为‘http://localhost:8123/#/studentType’，显示的却是‘学生列表’
点击‘学生列表’，路由地址变为‘http://localhost:8123/#/studentList’，显示的还是‘学生列表’

关键代码：

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)));

// 使用getRoutes函数导入component组件到对应的路由
var routes = tools.getRoutes(menuData);

// 将路由插入到router中，注：页面刷新时会丢失，所以需要监听beforeEach，在其中重新添加
this.$router.addRoutes(routes);
this.$router.push('/index');

tools.js文件

getRoutes (menu) {
    var rootRoute = '';
    if ( !menu || menu.length <= 0 ) {
        return [];
    }

    for ( var i = 0; i < menu.length; i++ ) {
        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;
},

是不是getRoutes里面的component引入不对呀？

github地址：https://github.com/sunshineTY...
后台系统登录账户：1 密码：1

Answer 1

我这个应该是import引入的问题，不过我还是没搞清楚是什么原因。现在我找到另一种方法解决这个问题。
创建一个Components.js文件来专门引入组件，然后在动态路由中存组件名，不存组件路径了，通过组件名绑定在Components.js中对应的组件。

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)));

// 使用getRoutes函数导入component组件到对应的路由
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; i++ ) {
        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;
},

Answer 2

   children: [
            {path: '/workerType', componentPath: '/workersSystem/workerType', text: '职工类别'},
            {path: '/workerList', componentPath: '/workersSystem/workerList', text: '职工列表'}
        ]
        

二级路由 path 不用加 /

Answer 3

我也是路由新手，但是我看到一个问题，你看看是不是这个问题，你所有children下的path:"workerType",写成这样，因为你的路由没有匹配到，默认显示最后一个，这是官网的路由方式

Answer 4

同意楼上 前端小智，children里的路由 path去掉/

另外，你仔细看下你的子路由对应的组件内容 是不是正确？