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.8k
评论
    4 个回答

    我这个应该是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;
    },
         children: [
                  {path: '/workerType', componentPath: '/workersSystem/workerType', text: '职工类别'},
                  {path: '/workerList', componentPath: '/workersSystem/workerList', text: '职工列表'}
              ]
              

      二级路由 path 不用加 /

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

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

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

            撰写回答

            登录后参与交流、获取后续更新提醒

            相似问题
            推荐文章