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

使用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

阅读 2.6k
评论
    4 个回答
       children: [
                {path: '/workerType', componentPath: '/workersSystem/workerType', text: '职工类别'},
                {path: '/workerList', componentPath: '/workersSystem/workerList', text: '职工列表'}
            ]
            

    二级路由 path 不用加 /

      相似问题
      推荐文章