45.(前端)菜单选项高亮问题与保存当前访问页面

1.添加跳转路由高亮失效

由于高亮显示default-active=“2”，是使用index作为高亮显示，我们刚刚把index改成了路由地址，所以就无法使用了。现在要做的就是把index改成路由地址就好啦！

2.修改步骤

1. 修改default-active为一个变量，赋给他一个变量值activePath
2. 导出activePath
3. 创建点击函数，点击菜单时候赋值给变量

3.高亮失效代码展示

<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="activePath" 
        class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#303133" text-color="#fff" active-text-color="#409EFF" unique-opened
        router>
        
        
        <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" @click="saveActivePath">
                <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>

export default{
    // 存储导航数据
    data () {
        return {
            activePath:''
        }
    },
    // 创建时被执行的函数
    created () {
        this.getMenulist()
        console.log(this.menuList);
    },
    methods:{
		 saveActivePath (ap) {
            console.log(ap.index);
            this.activePath = ap.index
        }
    }
}
script>
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

4.保存上次的访问的页面地址用于返回上次浏览问题

我们可以使用window下的sessionStorage去记录住当前访问的地址。点击返回，就可以直接回到上一次的页面。

4.1 步骤

1. 保存index
2. 在新建时候获取activePath

4.2代码展示

    created () {
        this.getMenulist()
        // console.log(this.menuList);
        this.activePath = window.sessionStorage.getItem('activePath')
    },


        saveActivePath (ap) {
            // console.log(ap.index);
            window.sessionStorage.setItem('activePath', ap.index)
            this.activePath = ap.index
        }
    }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.3效果展示

5. 完整代码展示

<!-- 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="activePath" 
        class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#303133" text-color="#fff" active-text-color="#409EFF" unique-opened
        router>
        <!-- 遍历传递数据给导航 -->
        <!-- 给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" @click="saveActivePath">
                <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'
            },
            activePath:''
        }
    },
    // 创建时被执行的函数
    created () {
        this.getMenulist()
        // console.log(this.menuList);
        this.activePath = window.sessionStorage.getItem('activePath')
    },
    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);
        },
        saveActivePath (ap) {
            // console.log(ap.index);
            window.sessionStorage.setItem('activePath', ap.index)
            this.activePath = ap.index
        }
    }
}
</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
127
128
129
130
131
132
133
134