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

听风语
  • 49

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

回复
阅读 3.5k
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去掉/

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

你知道吗?

宣传栏