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模式开启路由跳转功能，可以参考官方文档：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>

异常即可消失。

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

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

【应用】如何使用 element-ui 之 NavMenu 导航菜单中的 router 属性（在激活导航时以 path 进行路由跳转）
效果图: 使用: 1.<template> <el-header style="height: 61px" > <el-menumode = &quo ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
ElementUi中NavMenu 导航菜单router用法
问题引出写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMe ...
Element UI样式修改之NavMenu导航菜单
目录 Element UI样式修改之NavMenu导航菜单一.成果展示二.步骤三.完整代码 Element UI样式修改之NavMenu导航菜单一.成果展示 Element UI官网给出的例子 ...
Elementui NavMenu 导航菜单使用
官方文档https://element.eleme.cn/#/zh-CN/component/menu NavMenu 导航菜单官方使用项目实例官方使用 <el-menu :default ...
element菜单组件样式修改NavMenu导航菜单
NavMenu导航菜单 1.选中菜单的颜色 .el-menu-item.is-active {background-color: #41a3fb !important; } 2.菜单hover颜色 . ...
在虚拟机中安装TIA博途时的注意事项
在虚拟机中安装TIA博途时的注意事项项目储存在共享的设备上如果将项目储存在共享设备上,在某些情况下可能会导致项目没有写权限.打开项目后,会收到如下消息:"打开项目(0800:000014 ...
Vue3中的Vue Router初探
对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变 ...
Vue router 模式 hash 和 history
目录 Vue router 基本使用 Vue-router 传参 hash 模式 Vue-router hash history 模式 Vue router 基本使用用 Vue + Vue Rout ...

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

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

最新文章

热门文章