Vue开发实例（六）实现左侧菜单导航

3. 菜单中加入路由配置

• 这里我们使用一级菜单，简单方便，修改Aside/index.vue的代码。
• 在el-menu里面加入 router属性
• 在el-menu-item 的index，设置对应的子路由

代码参考如下：

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

我们进入index主路由，发现页面是空的

点击左侧导航菜单，就会有对应的页面内容

4、处理默认的Main窗口为空的情况

设置默认的跳转位置，设置如下：

• 在子路由中添加一个新的路由，用来默认跳转
• 在主路由中配置redirect 值为这个子路由

router/index.js的代码如下

import VueRouter from "vue-router"
import Index from "@/components/Index";

const routes = [
    //一级路由
    {
        path: '/index',
        name: 'index',
        component: Index,
        redirect: 'index/Main',
        //路由嵌套
        children:[
            {path: '/index/Main',component: () => import('@/components/Main/index.vue')},
            {path: '/index/menu1',component: () => import('@/components/Main/Main1.vue')},
            {path: '/index/menu2',component: () => import('@/components/Main/Main2.vue')},
            {path: '/index/menu3',component: () => import('@/components/Main/Main3.vue')}
        ]
    }
]

const router = new VueRouter({
    mode:'history',
    routes
})

export  default router;

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

其实就是一个重定向的操作，当直接输入index路由时就会默认跳转到Main路由里面，这样就会有个默认的页面了。
下方我们在地址栏只输入到index，敲回车后，会在后面默认加上 “/Main”，直接重定向了，同时Main窗口的页面也显示了我们指定的页面。

五、动态左侧菜单导航

在项目中，比较多见的是会将菜单存储到后台的数据库中，通过返回数据来决定菜单的模样，并不是由前端来控制菜单的模样，所以就来实现动态的菜单导航，根据后台数据来生成菜单导航。

1、动态实现一级菜单

分析上述代码，其中代码 一级菜单1 是比较相似的，不同的地方有3个：

• index 表示路由的path
• 图标的名称
• 菜单的名称

基于以上几个不同，我们可以考虑设置一个数组，数组的元素包含 路由路径、图标名、菜单名等几个属性，然后以循环的方式来输出这个菜单。

实现代码：

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

1. 菜单数据menu_data包含3个元素，每个元素分别有name、icon和path属性，这个三个属性分别对应菜单名、图标、路由的路径。
2. 使用v-for循环menu_data，填入对应的属性就可。

2、动态实现二级菜单

在一级菜单的数据对象里面加入 child 属性，这个属性也是跟现在的菜单数据menu_data一样的，
child也是一个数组，包含多个元素，每个元素分别有name、icon和path属性，这个三个属性分别对应菜单名、图标、路由的路径。

参考代码：

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
101
102
103
104
105
106
107
108