2020-06-13 elementui左侧导航配合vue-router使用

444 阅读1分钟

1.导航数据写死版(即导航的内容不需要通过请求获得):

刚开始我是这样用的(能用但是有点问题):

        <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">
                 <router-link to="/qe">富文本测试页</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
                 <router-link to="/vca">页面截图测试页</router-link>
            </el-menu-item>
        </el-menu-item-group>

这样用的话点击 router-link 渲染出来的a标签是可以正常跳转的,但是点击 el-menu-item 渲染出来的li标签就无法跳转了

其实人家组件本来就可以和vue-router配合得很好:

        <el-menu default-active="2"  class="el-menu-vertical-demo" router>
<!-------------------------------------------------------------------------------------------------------->
        <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="/qe">富文本测试页</el-menu-item>
            <el-menu-item index="/vca">页面截图测试页</el-menu-item>
        </el-menu-item-group>

修改了两处:

1.顶级父元素增加 router 属性(这里不能写成router="true",否则会报错Invalid prop: type check failed for prop “router”. Expected Boolean, got String with value “true”.)

2.选项子元素的跳转路径写在 index 属性里

1.导航数据请求获取版: 留个坑慢填