vue2.x项目从0到1（二）之后台管理侧边栏（动态渲染路由以及高亮）

接上篇博客  我们讲完了  后台管理系统是怎么把路由出口设置到layout布局里的   接下来就是封装侧边栏了  先上全篇代码 之后在讲解

<template>
    <div class="aside">
        <div class="logoname">医疗机构后台管理系统</div>
        <el-scrollbar :vertical="true" class="scrollbar_left_nav">
            <div class="wrap">
                <el-menu :key="update" :default-active="defaultActive">
                    <div v-for="(item, index) in getMenu" :key="index">
                        <el-submenu :index="item.name">
                            <template slot="title">
                                <span>{{ item.meta.title }}</span>
                            </template>
                            <el-menu-item v-for="(nth, idx) in item.children" :key="idx" :index="nth.name"
                                @click="goRouter(nth)">{{ nth.meta.title }}</el-menu-item>
                        </el-submenu>
                    </div>
                </el-menu>
            </div>
        </el-scrollbar>
    </div>
</template>

<script>
export default {
    name: 'layout-sidebar',
    data() {
        return {
            defaultActive: 'users', // 当前高亮
            update: 0
        }
    },
    computed: {
        // 显示在侧边栏的路由
        getMenu() {
            return this.$router.options.routes.filter(
                it => !it.meta.noLayout
            )
        }
    },
    watch:{
        $route(){
            // 监听路由变化  当跳转到如个人信息页面时（不在侧边栏当中的路由时） 高亮取消
            this.defaultActive = this.$route.name
        }
    },
    created() {
        // 高亮为当前路由所在
        this.defaultActive = this.$route.name
    },
    methods: {
        // 点击侧边栏 路由跳转事件
        goRouter(data) {
            // 判断一下 点击跳转页面的路由是否是当前路由  如果是则不做反应  否则跳转到点击页
            if (data.name !== this.$route.name) {
                // 切换高亮
                this.defaultActive = data.name
                // 路由跳转
                this.$router.push({
                    name: data.name
                })
            }

        },
    }
}
</script>

<style scoped>
.aside {
    height: 100%;
    width: 100%;
}

.logoname {
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    margin-bottom: 20px;
}
</style>

这里我是动态渲染的  渲染的路由表在 this.$router.options.routes 里大家可以打印一下

这里我做了一个处理  就是路由里meta里 noLayout: false 的出现在路由里  其他的不展示

 这样路由就解决了  接下来就是点击事件

 在这里绑定上点击事件之后  我在里面做了两件事情

第一件事情就是切换高亮   第二件就是跳转页面

 高亮就是当这个值为那个name时  对应的那个选项会被加上高亮  然后在created加上this.defaultActive = this.$route.name， 其作用是 防止用户刷新页面 导致高亮变回第一个

结束  是不是很简单