vue动态路由

1. 首先在router文件夹中的index文件先写固定路由（首页，404，登陆页面等），然后在router文件夹下创建page文件，此文件放入动态路由（运营管理，商品管理，推广管理等）

index文件

 {
path: '/index',
name: 'IndexView',//主页面
component: () => import('../views/Index.vue')
    }
,{
path: '/login',//登录页面
name: 'LoginView',
component: () => import('../views/Login.vue')
},
{
path: '/404',//404
name: '404',
component: () => import('../views/404.vue')
},
{
path: "/:pathMatch(.*)*",
name: 'NotFoundView',
redirect: "/404" //路由重定向
}

page文件

 // 运营管理
{
path: 'operate',
name: 'operate',
component: () => import('../views/Main.vue'),
meta: {
title: 'operate.operate',
icon: 'icon-icon_tuiguang'
},
children: [
{
path: 'order',
name: 'order',
component: () => import('../views/operate/Order.vue'),
meta: {
title: 'operate.order'
}
},
{
path: 'comment',
name: 'comment',
component: () => import('../views/operate/Comment.vue'),
meta: {
title: 'operate.comment'
}
},
{
path: 'freight',
name: 'freight',
component: () => import('../views/operate/Freight.vue'),
meta: {
title: 'operate.freight'
}
}
]
},
// 商品管理
{
path: 'commodity',
name: 'commodity',
component: () => import('../views/Main.vue'),
meta: {
title: 'commodity.commodity',
icon: 'icon-shangpin-xianxing'
},
children: [
{
path: 'productList',
name: 'productList',
component: () => import('../views/commodity/ProductList.vue'),
meta: {
title: 'commodity.productList'
}
},
{
path: 'group',
name: 'group',
component: () => import('../views/commodity/Group.vue'),
meta: {
title: 'commodity.group'
}
},
{
path: 'class',
name: 'class',
component: () => import('../views/commodity/Class.vue'),
meta: {
title: 'commodity.class'
}
}
]
},
// 推广管理
{
path: 'extension',
name: 'extension',
component: () => import('../views/Main.vue'),
meta: {
title: 'extension.extension',
icon: 'icon-xitong-'
},
children: [
{
path: 'advertisement',
name: 'advertisement',
component: () => import('../views/extension/Advertisement.vue'),
meta: {
title: 'extension.advertisement'
}
},
{
path: 'coupon',
name: 'coupon',
component: () => import('../views/extension/Coupon.vue'),
meta: {
title: 'extension.coupon'
}
}
]
},

2. 在从router文件夹中创建addRouter文件，先把固定路由index文件和动态路由page文件引入，

使用addRouter方法（动态添加更多的路由规则），再从mian文件全局注册动态路由列表addouter文件

import '@/router/addRouter'//全局注册动态路由

addRouter文件

import menus from "./page"// 需要动态添加的路由信息
import router from "./index";
let addRouter = () => {
menus.forEach(item => {//循环路由信息
router.addRoute("IndexView", item)// 在IndexView路由名称下添加子路由参数1：父路由名称，参数2：子路由
// addRoute动态添加更多的路由规则
});
}
// 调用方法
addRouter();