vue动态路由

90 阅读 0 评论 60 点赞

我是靠谱客的博主温柔冬日，这篇文章主要介绍vue动态路由，现在分享给大家，希望可以做个参考。

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

index文件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 {
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'
}
}
]
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 // 运营管理
{
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'
}
}
]
},

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

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

复制代码

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

addRouter文件

复制代码

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