注意事项一：
router正确使用方法为：
复制代码
1
2
3
4
5
6
7
8<el-menu ... router> ...... </el-menu> 或者： <el-menu ... :router="true"> ...... </el-menu>
注意事项二：
需要路由跳转时，需要在el-main中使用路由视图配置项，即：
复制代码
1
2
3
4<el-main> <router-view></router-view> </el-main>
注意事项一相关异常：
Vue整合ElementUI时，使用vue-router模式开启路由跳转功能，可以参考官方文档：https://element.eleme.cn/#/zh-CN/component/menu，具体如下：
参数：router；
说明：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转；
类型：boolean；
默认值：false。
部分实测代码如下：
复制代码
1
2
3
4<el-menu :default-openeds="['1', '3']" router="true"> ...... </el-menu>
启动应用，控制台出现下面的异常：
复制代码
1
2vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "router". Expected Boolean, got String with value "true"
参考https://github.com/ElemeFE/element/issues/307得知，正确使用方法为：“:router=“true” 或者直接 ”
将上述代码片段修改为：
复制代码
1
2
3
4<el-menu :default-openeds="['1', '3']" :router="true"> ...... </el-menu>
或者：
复制代码
1
2
3
4<el-menu :default-openeds="['1', '3']" router> ...... </el-menu>
异常即可消失。
注意事项二相关异常：
如果路由视图配置项缺失或者错误，则无法正常路由跳转。
最后
以上就是笨笨小蘑菇最近收集整理的关于NavMenu导航菜单中使用vue-router模式时的注意事项的全部内容，更多相关NavMenu导航菜单中使用vue-router模式时内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复