解决Vue3.0整合element plus时el-menu导航选中后刷新页面保持当前选中状态
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
简要概述
- element plus是element官方针对Vue3.0做的一套前端UI组件,在开发过程中经常会使用到el-menu这个组件,而且我们会将当前激活的菜单设置高亮,而如果不设置default-active属性,我们则会遇到刷新页面后当前激活的菜单项不高亮的问题
- 下面来解决这个问题,本文是根据vue3做的,之前在网上看到好多教程,都是提示将default-active设置为$router.path,而在vue3中并没有起作用。
解决步骤
- 我通过浏览器console出‘this.$router.currentRoute’
即
console.log('打印路由',this.$router.currentRoute);
在浏览器看到:
在这里打印出了我们想要的路由**“explainer1”**!!!
所以我们可以通过this.$router.currentRoute._value.fullPath访问到当前激活的url,然后将default设置为这个值,我们的这个问题就解决了
- 我的解决办法:
//el-menu里进行数据绑定
<el-menu
background-color="#333744"
text-color="#fff"
active-text-color="#ffd04b"
:unique-opened="true"
:default-active="paths"
router >
//在script中数据赋值
data() {
return {
paths:this.$router.currentRoute._value.fullPath.split("/")[1],
}
}
然后刷新就可以解决问题了!!
水平有限,如有错误还请指定!
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)