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

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

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

2.修改步骤

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

3.高亮失效代码展示

<!-- 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">
        <!-- 修改activePath -->
        <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>

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

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
        }
    }

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>