ElementPlus 侧边栏路由设置

wj1713520

已于 2022-03-22 22:41:29 修改

阅读量4.2k

点赞数 7

分类专栏： CSS Vue 文章标签： elementui vue.js javascript

于 2022-03-17 00:34:08 首次发布

本文链接：https://blog.csdn.net/wj1713520/article/details/123539783

版权

如果使用<router-link ></router-link>去包裹<el-menu-item></el-menu-item>会导致页面刷新之后，子路由页和侧边栏高亮文字的选中状态不匹配的问题！

例如：侧边栏选中‘详情页’之后，刷新浏览器，侧边栏的选中状态会变成‘首页’，但是子路由页依然停留在详情页！

按照以下代码修复：

<template>
  <el-menu
    active-text-color="#409eff"
    background-color="#7270F5"
    class="el-menu-vertical-demo"
    :default-active="route.path" //点击浏览器的前进后退，侧栏的高亮会和子路由页同步
    text-color="#fff"
    :router="true" //开启路由
  >
    <div class="logo">LOGO</div>
      <el-menu-item index="/Main" > //index指向路由页
        <el-icon><icon-menu /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      <el-menu-item index="/Detail"> //index指向路由页
        <el-icon><Document /><