失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > NavMenu导航菜单中使用vue-router模式时的注意事项

NavMenu导航菜单中使用vue-router模式时的注意事项

时间:2019-05-27 02:26:16

相关推荐

NavMenu导航菜单中使用vue-router模式时的注意事项

注意事项一:

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模式开启路由跳转功能,可以参考官方文档:/#/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"

参考/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>

异常即可消失。

注意事项二相关异常:

如果路由视图配置项缺失或者错误,则无法正常路由跳转。

如果觉得《NavMenu导航菜单中使用vue-router模式时的注意事项》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。