NavMenu导航菜单中使用vue-router模式时的注意事项
程序员文章站
2022-06-06 23:36:35
...
注意事项一:
router正确使用方法为:
<el-menu ... router>
......
</el-menu>
或者:
<el-menu ... :router="true">
......
</el-menu>
注意事项二:
需要路由跳转时,需要在el-main中使用路由视图配置项,即:
<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。
部分实测代码如下:
<el-menu :default-openeds="['1', '3']" router="true">
......
</el-menu>
启动应用,控制台出现下面的异常:
vue.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” 或者直接 ”
将上述代码片段修改为:
<el-menu :default-openeds="['1', '3']" :router="true">
......
</el-menu>
或者:
<el-menu :default-openeds="['1', '3']" router>
......
</el-menu>
异常即可消失。
注意事项二相关异常:
如果路由视图配置项缺失或者错误,则无法正常路由跳转。
上一篇: 协议