注意事项一:
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模式时的注意事项》对你有帮助,请点赞、收藏,并留下你的观点哦!