vue项目：侧边栏搭配路由侧边栏高亮

最新推荐文章于 2024-05-30 10:22:07 发布

亚亚呀亚亚

最新推荐文章于 2024-05-30 10:22:07 发布

阅读量1.5k

点赞数

分类专栏：前端架构师成长之路 vue-cli3踩坑之旅

本文链接：https://blog.csdn.net/yayay1010/article/details/97809767

版权

前端架构师成长之路同时被 2 个专栏收录

8 篇文章 2 订阅

订阅专栏

vue-cli3踩坑之旅

6 篇文章 0 订阅

订阅专栏

如果项目中使用的是element-ui
可以直接使用它的NavMenu组件实现导航栏高亮，它会在activeIndex字段自动识别，匹配到下面item的index，给它加上高亮效果，所以我选择item循环的时候，index绑定每个字段的路由地址，在computed中计算当前路由前两个字段，并赋值给activeIndex，这样可以保证刷新保持高亮效果

<el-menu :default-active="activeIndex"
                 mode="horizontal"
                 background-color="#2a2f3b"
                 text-color="#fff"
                 active-text-color="#2B8EE7"
                 :router="routerOpen"
        >
            <el-menu-item class="logo-img">
                <template>
                    <img src="@/assets/img/nav/logo.png" @click="gotoRainbow"/>
                </template>
            </el-menu-item>          
</el-menu>


// computed中
 computed: {
        activeIndex() {
            const routePath = this.$route.path;
            return routePath.split('/').slice(0, 3).join('/');
        },
      }

还可以使用路由配置meta

// 相关路由中
{
        name: 'IMP',
        path: '/main/sectorDetails/IMP',
        component: resolve => require(['@/views/sectorDetails/buList/IMP'], resolve),
        meta: {
            typeId: '1',
        }
    }


// 导航栏组件中读取meta中的值，

created() {
        this.defaultActive = this.$route.meta.typeId;
    },

然后用上面相同的设置就好了