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


Posted in Javascript onMarch 09, 2020

情景

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

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

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

需要手动实现。

Try Try See

第一反应是通过 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 对象
const User = {
 template: '...',
 watch: {
 $route(to, from) {
  // react to route changes...
 }
 }
}

使用 beforeRouteUpdate

const User = {
 template: '...',
 beforeRouteUpdate(to, from, next) {
 // react to route changes...
 // don't forget to call next()
 }
}

另外

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

知识点扩展

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

有两种

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

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

<template>
 <div class="index">
 <div class="headTop"></div>
 <div class="nav">
  <img src="../assets/img/logo.png" alt="">
  <el-row :gutter="20">
  <el-col :span="3" @click.native="tabChange('FirstScreen')" ><div class="grid-content bg-purple">首页</div></el-col>
  <el-col :span="3" @click.native="tabChange('pagetwo')"><div class="grid-content bg-purple">场站</div></el-col>
  <el-col :span="3" @click.native="tabChange('pagethree')" ><div class="grid-content bg-purple">订舱</div></el-col>
  
  </el-row>
 </div>
 <div :is="currentView"></div>
  <!-- <div class="aaa" >asdasd</div> -->
 </div> 
</template>
 
<script>
import FirstScreen from '../views/containers/FirstScreen'
import pagetwo from '../views/containers/pagetwo'
import pagethree from '../views/containers/pagethree'
 
export default {
 name: 'index',
 components:{
 FirstScreen,
 pagetwo,
 pagethree
 },
 data () {
 return {
  FirstScreen: 'FirstScreen',
  pagetwo: 'pagetwo',
  pagethree: 'pagethree',
  currentView: 'FirstScreen',//组建切换
 
  activeIndex: '1',
  activeIndex2: '1',
  
 }
 },
 computed:{
 
 },
 created(){
 
 },
 methods:{
 tabChange(tabItem) {
  this.currentView = tabItem;
  console.log(this.currentView);
 }
 }
}
</script>

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

Javascript 相关文章推荐
javascript 节点遍历函数
Mar 28 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 #Javascript
JS中的const命令你真懂它吗
Mar 08 #Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 #Javascript
Vue vm.$attrs使用场景详解
Mar 08 #Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 #Javascript
vue-cli点击实现全屏功能
Mar 07 #Javascript
vue全屏事件开发详解
Jun 17 #Javascript
You might like
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP钩子实现方法解析
2019/05/21 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
javascript简易画板开发
2020/04/12 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python中文件操作简明介绍
2015/04/13 Python
给Python入门者的一些编程建议
2015/06/15 Python
python的else子句使用指南
2016/02/27 Python
python使用folium库绘制地图点击框
2018/09/21 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
班主任工作经验交流材料
2014/05/13 职场文书
党员示范岗材料
2014/12/19 职场文书
网吧员工管理制度
2015/08/05 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
SpringBoot整合Minio文件存储
2022/04/03 Java/Android
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技