Element: menu 采用Menu-Item 的 route属性无法进行跳转

Created on 7 Nov 2016 · 13Comments · Source: ElemeFE/element

version

r0.8

<el-menu-item v-for="sub in menu.subMenu" :index="sub.routeName" :route="{name:sub.routeName}">
                  <i class="iconfont" :class="[sub.icon]" style="margin-right: 10px;"></i>
                  {{sub.title}}
                  <i class="el-submenu__icon-arrow el-icon-arrow-left"></i>
                </el-menu-item>

qq 20161108000124

已经设置成功，但是无法采用name的方式进行跳转，点击无反应

Source

masterzhang

Most helpful comment

这个文档还是希望写清楚些，或者举个例子，这个太难搞了

wujinfeng on 11 Nov 2017

👍9

All 13 comments

<el-menu theme="dark" router="router">
        <el-submenu v-bind:index.prop="nav.path" v-if="nav.children">
          <template  slot="title">{{nav.name}}</template>
          <el-menu-item v-bind:index.prop="cnav.path" v-for="cnav in nav.children" > {{cnav.name}}</el-menu-item>
        </el-submenu>
        <el-menu-item v-bind:index.prop="nav.path"  v-else>{{nav.name}}</el-menu-item>
    </el-menu>

首先 el-menu 的router设置成true，然后el-menu-item 的跳转是根据index属性的，index的绑定是这样的v-bind:index.prop="cnav.path"

DevilLeven on 8 Nov 2016

我之前是这么做的，但是我在一个内嵌的页面的时候，比如当前路由是
http://www.xxx.com/a/b
这时点击跳转
会变成http://www.xxx.com/a/b/c
如果当前在http://www.xxx.com/a
则跳转时是http://www.xxx.com/c
这是没有问题的，不知道是我路由配置不对还是怎么样？因此看到Menu-Item可以设置route属性觉得是不是可以设置这个进行跳转

masterzhang on 8 Nov 2016

@masterzhang 对的，如果通过index只能帮你这么处理，你可以用route属性来设置，具体参数可以去看vue-router的文档。

baiyaaaaa on 8 Nov 2016

@baiyaaaaa 我采用:route="{name:sub.routeName}"已经传递了name了，可是发现点击还是不能跳转的。
看官网的文档中route传递的是Vue Router 路径对象。我上面传递了一个命名的路径对象了，可是不能跳转，是不支持吗？还是哪里写的不对？

masterzhang on 8 Nov 2016

@masterzhang 这个好像不能用:route 还有可以拜托你发一个vue-devtools 的chrome插件。我这谷歌上不去十分感谢 [email protected]

DevilLeven on 8 Nov 2016

@DevilLeven 已经发你邮箱了，你试试。还有，这个既然不能使用:route,那:route这个属性的作用是?

masterzhang on 8 Nov 2016

@masterzhang 我测试这样是可以用的，你如果跑不起来可以提供能在线重现的链接。
:route="{name:sub.routeName}"这里的name需要传路由名称而不是路由的 path。如果routeName是路由的路径你应该这么配置：:route="{path:sub.routeName}"

baiyaaaaa on 8 Nov 2016

👍1

ok，最后发现是自己的问题，之前采用index跳转时，由于自己给index传递的是'a而不是/a`以此在子页面的时候，点击导航栏被认为是相对路由了。

@baiyaaaaa 能否把你的例子给我看看呢？使用:route的时候，Menu的router属性应该是false是吧

[email protected]

masterzhang on 8 Nov 2016

👍2

@baiyaaaaa 是我错啦，我在使用:route的时候，把Menu的router属性设置成了false，被官网文档的是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转给迷惑了，以为设置成了true就一定以index作为跳转。