欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

异常即可消失。

注意事项二相关异常:
如果路由视图配置项缺失或者错误,则无法正常路由跳转。

相关标签: vue vue vue.js