44.(前端)修改菜单路由地址

1.概述

本节内容，主要是当我们点击菜单栏的一项时，让他跳转到一个页面。(挂载子组件)
大多数会想使用router-link，这里可以使用element-ui提供的一个属性router
其作用时：是否使用vue-router模式，启用该模式会在激活导航时以index作为path进行路由跳转，默认为false

2.实现过程

1. 使用router，修改index为path
2. 创建组件：src/components/user/User.vue
3. 挂载子组件 ：去到这src/router/index.js

3.代码展示

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Welcome from '../components/Welcome.vue'
import Home from '../components/Home.vue'
import User from '../components/user/User.vue'
// 引入全局样式
import '../assets/css/global.css'


Vue.use(VueRouter)

const routes = [
  // 为login组件创建路由
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    // 引入子组件，创建子路由
    redirect: '/welcome',
    children: [
      {
        path: '/welcome', component: Welcome
      },
      {
        path: "/user_list", component: User
      }
    ]
  }
]

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

<template>
    <h1>User组件h1>
template>
1
2
3
4

4.完整代码展示

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Welcome from '../components/Welcome.vue'
import Home from '../components/Home.vue'
import User from '../components/user/User.vue'
// 引入全局样式
import '../assets/css/global.css'


Vue.use(VueRouter)

const routes = [
  // 为login组件创建路由
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    // 引入子组件，创建子路由
    redirect: '/welcome',
    children: [
      {
        path: '/welcome', component: Welcome
      },
      {
        path: "/user_list", component: User
      }
    ]
  }
]
const router = new VueRouter({
  routes
})

export default router

```xml
<!-- src/compoents/Home.vue -->
<template>
    <el-container class="home-container">
        <el-header>
            <div>
                <img src="../assets/logo.png">
                <span>电子后台管理系统</span>
            </div>
            <el-button type="primary" @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <el-aside width="200px">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#303133" text-color="#fff" active-text-color="#409EFF" unique-opened
        router="true">
        <!-- 遍历传递数据给导航 -->
        <!-- 给index加冒号意思是：使他变成一个变量 -->
        <el-submenu :index="item.id+''" v-for=" item in menuList" :key="item.id">
            <template slot="title">
                <i :class="IconObj[item.id+'']"></i>
                <span>{{item.name}}</span>
            </template>
            <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id">
                <i :class="IconObj[subItem.id+'']"></i>
                    <span>{{subItem.name}}</span>
                    </el-menu-item>
            </el-submenu>
        </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
    </el-container>
    </el-container>
</template>
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

<template>
    <el-container class="home-container">
        <el-header>
            <div>
                <img src="../assets/logo.png">
                <span>电子后台管理系统span>
            div>
            <el-button type="primary" @click="logout">退出el-button>
        el-header>
        <el-container>
            <el-aside width="200px">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#303133" text-color="#fff" active-text-color="#409EFF" unique-opened
        router="true">
        
        
        <el-submenu :index="item.id+''" v-for=" item in menuList" :key="item.id">
            <template slot="title">
                <i :class="IconObj[item.id+'']">i>
                <span>{{item.name}}span>
            template>
            <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id">
                <i :class="IconObj[subItem.id+'']">i>
                    <span>{{subItem.name}}span>
                    el-menu-item>
            el-submenu>
        el-menu>
            el-aside>
            <el-main>
                <router-view>router-view>
            el-main>
    el-container>
    el-container>
template>

<script>
import { Icon } from 'element-ui';

export default{
    // 存储导航数据
    data () {
        return {
            menuList: [],
            IconObj:{
                '1':'el-icon-user-solid',
                // '2':'el-icon-s-tools',
                '2':'el-icon-user-solid',
                '3':'el-icon-s-shop',
                '4':'el-icon-s-order',
                '5':'el-icon-s-tools',
                '6':'el-icon-s-data',
                '11':'el-icon-user',
                // '21':'el-icon-setting',
                '21':'el-icon-user',
                '22':'el-icon-setting',
                '31':'el-icon-goods',
                '32':'el-icon-goods',
                '33':'el-icon-goods'

            }
        }
    },
    // 创建时被执行的函数
    created () {
        this.getMenulist()
        console.log(this.menuList);
    },
    methods:{
        logout (){
            // 第一步，清除token
            window.sessionStorage.clear()
            // 第二步，跳转到登录页面
            this.$router.push('/login')
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 从后端中获取数据
        // 由于我们想在他刷新页面时候就能够显示出来，所以得改为同步操作；不改的话就可能会找不到
        async getMenulist () {
            const {data: res} = await this.$axios.get('/api/menu')
            // console.log(res.data);
            this.menuList = res.data
            // console.log(res.data);
        }
    }
}
script>

<style lang="less" scoped>
// 整个组件

.home-container{
    height: 100%;
}
// 界面顶
.el-header{
    display: flex;
    align-items: center; //居中操作
    background-color: #409EFF;
    justify-content: space-between;
    color: #fff;
    font-size: 20px;
    img{
        height: 50px;
        width: 100px;
    }
    div{
        display: flex;
        align-items: center;
    }
}
// 侧面
.el-aside{
    background-color: #303133;
}
// 中间
.el-main{
    background-color: #e4e7ed;
}
style>

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

<template>
    <h1>User组件h1>
template>
1
2
3
4