element ui menu-item 关联 router

最新推荐文章于 2024-09-12 17:05:41 发布

夜跑者

最新推荐文章于 2024-09-12 17:05:41 发布

阅读量2.2k

点赞数 2

分类专栏： element ui 文章标签： ui 前端 javascript

本文链接：https://blog.csdn.net/liubangbo/article/details/125554921

版权

element ui 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在navMenu 导航菜单中科院el-menu组件设置router属性，官方文档有一下描述：

router

是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

boolean

—

false

比较方便，设置此属性后，激活左侧项就能自动跳转到相应的子路由页面。代码如下：

    <el-menu
      :default-active="subRoutesList[0].path"
      :collapse="isCollapse"
      style="height: 100%; overflow-y: scroll"
      class="el-menu-vertical-demo"
      router
    >
      <el-menu-item v-for="item in subRoutesList" :key="item.path" :index="{item.path}>
        <i :class="item.meta.icon"></i>
        <span slot="title">{{item.meta.name}}</span>
      </el-menu-item>      
    </el-menu>

path如下所示：

[{
    path: 'asset/index'
},
{
    path: 'device/index'
}]

刚开始页面路由如下 http://localhost:8085/smart-park/asset/index

当切换到device菜单时，没有跳转到相应device子路由页面，页面路径如下

http://localhost:8085/smart-park/asset/device/index

怎么会这样呢？

修改一下el-menu-item index属性就可以了，代码如下：

    <el-menu
      :default-active="`/${subRoutesList[0].path}`"
      :collapse="isCollapse"
      style="height: 100%; overflow-y: scroll"
      class="el-menu-vertical-demo"
      router
    >
      <el-menu-item v-for="item in subRoutesList" :key="item.path" :index="`/${item.path}`">
        <i :class="item.meta.icon"></i>
        <span slot="title">{{item.meta.name}}</span>
      </el-menu-item>      
    </el-menu>