微客导航 » 文章资讯 » 在Vue中实现随hash改变响应菜单高亮

在Vue中实现随hash改变响应菜单高亮

2023-07-29 15:24:03 190

情景

Vue+Element实现管理页面菜单栏，

点击菜单时router改变hash访问不同子组件。

但是改变hash时菜单栏展开状态和highlight并不会同步，

需要手动实现。

TryTrySee

第一反应是通过onhashchange监听hash的变化，

讲 location.hash.slice(2)推给menu的 default-active即可。

此时通过手动输入url或者前进后退时均可正常加载对应状态，但是通过组件中的link访问时，menu的状态没有改变。

加入alert验证发现没有触发hashchange。

Why

Seafault的解释是

Vue-Router底层调用的是 history.pushState

查阅MDN发现

注意 pushState()绝对不会触发hashchange事件，即使新的URL与旧的URL仅哈希不同也是如此。

Solution

Vue-Router的文档中给出两个方案

watch$route对象
constUser={
template:'...',
watch:{
$route(to,from){
//reacttoroutechanges...
}
}
}

使用beforeRouteUpdate

constUser={
template:'...',
beforeRouteUpdate(to,from,next){
//reacttoroutechanges...
//don'tforgettocallnext()
}
}

另外

原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

知识点扩展

vue关于点击菜单高亮与组件切换

有两种

一种是使用router-link这种直接可以用router-link-active来写高亮样式组件在路由跳转后高亮依旧存在

一种是：is的应用了点击触发事件事件改变currentView的值可以直接改掉：is 这个引入文件入口

到此这篇关于在Vue中实现随hash改变响应菜单高亮的文章就介绍到这了,更多相关vue菜单高亮内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

在Vue中实现随hash改变响应菜单高亮

热门推荐

随机推荐