关于vue使用Element Plus框架的时候,使用Menu菜单的时候,遇到了一些问题,解决了
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
主要是在我创建的 add.vue 的页面中点击按钮跳转的时候,成功切换到另外一个路由,但是菜单下的状态条不会因此改变,所以有了下面的解决方法.
这个是错误的,点击按钮切换了,但是状态没有切换
解决方法
在定义菜单的页面中使用
这是页面内容
<el-menu
mode="horizontal"
class="el-menu-demo"
:default-active="ZhuagnTai"
>
<el-menu-item index="1">
<router-link to="/look">展示文章</router-link>
</el-menu-item>
<el-menu-item index="2">
<router-link to="/add">发表文章</router-link>
</el-menu-item>
</el-menu>
这是setup()中的内容
setup(){
// 使用路由
const route = useRoute()
// 把ZhuagnTai的状态定义为1,默认的,对应的是 el-menu-item标签下的index
let ZhuagnTai = ref('1')
// 监听事件,监听route.path的变化
watch(()=>route.path,(newPath,oldPath)=>{
// 产生的新的路由进行判断,进行赋值
if(newPath === '/look'){
ZhuagnTai.value = '1'
}else if(newPath === '/add'){
ZhuagnTai.value = '2'
}
})
return{
ZhuagnTai
}
}
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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)