element ui menu-item 关联 router

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

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

<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>

最后

以上就是长情乐曲为你收集整理的element ui menu-item 关联 router的全部内容，希望文章能够帮你解决element ui menu-item 关联 router所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。