Element ui 导航栏刷新时高亮_elmenu打来新网页-优快云博客

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/107787276

本文介绍如何在Vue项目中使用Router实现侧边栏菜单的高亮显示及基于用户登录状态的路由权限控制。通过设置meta属性，实现不同路由路径的高亮效果，并在beforeEach钩子中检查用户登录状态，引导未登录用户至登录页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在组件中

      <el-container>
        <el-aside>
          <el-row class="tac">
            <el-col>					
              <el-menu :default-active="$route.meta.parentpath" //重点
              class="menu"
              background-color="#344055"
              text-color="white"  
              router
              >
                <el-menu-item index="/home">
                   <i class="iconfont icon-dizhi"></i>
                    首页
                </el-menu-item>                

                <el-menu-item index="/model">
                  <i class="iconfont icon-sikuaitubiao"></i>
                  已发布
                </el-menu-item>

                <el-menu-item index="/count">
                  <i class="iconfont icon-sikuaitubiao"></i>
                  统计
                </el-menu-item>

                <el-menu-item index="/publish">
                  <i class="iconfont icon-duihao"></i>
                  发表文章
                </el-menu-item>
                <el-menu-item index="/tabs">
                  <i class="iconfont icon-tags"></i>
                  标签页
                </el-menu-item>
                <el-menu-item index="/out">
                  <i class="iconfont icon-export"></i>
                  导出excel
                </el-menu-item>
                <el-menu-item index="/imageLoad">
                  <i class="iconfont icon-ic_image_upload"></i>
                  图片上传
                </el-menu-item>
                <el-menu-item index="/exit">
                  <i class="iconfont icon-tuichu"></i>
                  退出系统
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

2、在router中的index.js中的导航路由中加入

  meta: {
                    title: '首页',
                    parentpath: '/home'
                }

3、具体如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/Layout.vue'
// import { from } from 'core-js/fn/array'
Vue.use(VueRouter)


const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err);
};


const routes = [{

        path: '/login',
        name: 'login',
        component: () =>
            import ('../views/Login/login.vue'),
        meta: {
            title: '登录'
        }
    },
    {
        path: '/register',
        name: 'register',
        component: () =>
            import ('../views/register/register.vue')
    },
    {
        path: '',
        component: Layout,
        children: [{
                path: '/home',
                component: () =>
                    import ('../views/Home.vue'),
                meta: {
                    title: '首页',
                    parentpath: '/home'
                }
            },
            {
                path: '/model', //为了高亮而存在的页面
                name: 'model',
                redirect: '/released',
                component: () =>
                    import ('../views/released/model.vue'),
                children: [{
                        path: '/released', //发布
                        name: 'released',
                        component: () =>
                            import ('../views/released/released.vue'),
                        meta: {
                            titie: '发布',
                            parentpath: '/model'
                        },
                    },
                    {
                        path: '/edit',
                        name: 'edit',
                        component: () =>
                            import ('../views/released/edit.vue'),
                        meta: {
                            titie: '编辑',
                            parentpath: '/model'
                        },

                    },
                    {
                        path: '/look',
                        name: 'look',
                        component: () =>
                            import ('../views/released/look.vue'),
                        meta: {
                            titie: '查看',
                            parentpath: '/model'
                        },

                    },
                ]
            },

            {
                path: '/exit',
                name: 'exit',
                component: () =>
                    import ('../views/exit/exit.vue'),
                meta: {
                    title: '退出',
                    parentpath: '/exit'
                }
            },
            {
                path: '/tabs',
                name: 'tabs',
                component: () =>
                    import ('../views/Tabs/tabs.vue'),
                meta: {
                    title: '标签',
                    parentpath: '/tabs'
                }
            },
            {
                path: '/imageLoad',
                name: 'imageLoad',
                component: () =>
                    import ('../views/image/imageLoad.vue'),
                meta: {
                    title: '图片上传',
                    parentpath: '/imageLoad'
                }
            }, {
                path: '/publish',
                name: 'publish',
                component: () =>
                    import ('../views/publish/publish.vue'),
                meta: {
                    title: '发表',
                    parentpath: '/publish'
                }
            },
            {
                path: '/out',
                name: 'out',
                component: () =>
                    import ('../views/out/out.vue'),
                meta: {
                    title: '导出',
                    parentpath: '/out'
                }
            },
            {
                path: '/count',
                name: 'count',
                component: () =>
                    import ('../views/Count/count.vue'),
                meta: {
                    title: '统计',
                    parentpath: '/count'
                }
            },
        ]
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})


router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    let user = localStorage.getItem('user')
    if (to.path === '/login' || to.path === '/register') {
        next()
    } else {
        user ? next() : next('/login')
    }
})

export default router