在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 multibox 全选
Mar 22 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
百度地图api如何使用
Aug 03 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 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
第五节--克隆
2006/11/16 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
常用PHP封装分页工具类
2017/01/14 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python进阶教程之循环对象
2014/08/30 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python实现点云投影到平面显示
2020/01/18 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
国际书籍零售商:Wordery
2017/11/01 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
运动会开幕式主持词
2014/03/28 职场文书
八项规定对照检查材料
2014/08/31 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
Python使用Kubernetes API访问集群
2021/05/30 Python