在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 相关文章推荐
js 动态文字滚动的例子
Jan 17 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
node crawler如何添加promise支持
Feb 01 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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与XML的PDF文档生成技术
2006/10/09 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php自定义hash函数实例
2015/05/05 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
JavaScript实现三级级联特效
2017/11/05 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
详解Python设计模式之策略模式
2020/06/15 Python
python 利用toapi库自动生成api
2020/10/19 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
幼儿园教师考核制度
2014/02/01 职场文书
数控个人求职信范文
2014/02/03 职场文书
中学家长会邀请函
2014/02/03 职场文书
领导党性分析材料
2014/02/15 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
行政上诉状范文
2015/05/23 职场文书
山楂树之恋观后感
2015/06/11 职场文书
人代会简报
2015/07/21 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL