当vue路由变化时,改变导航栏的样式方法


Posted in Javascript onAugust 22, 2018

当我们需要做一个类似顶部 或 底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件,

并且改变导航栏按钮的样式,如果用<router-link to=""><router-link/> 跳转的时候,我们可以这样做,

改变router-link-active 的样式,它是路由path指向当前组件时系统自动生成的。

先看下效果:

当vue路由变化时,改变导航栏的样式方法

贴上我的路由文件js

export default new Router({
 routes: [
 {
  path: '/',
  component: App,
  children:[
  // 二级路由
  {
   path:'',
   component:common_nav,
   children:[
    {
     path:'/html',
     component:html
    },
    {
     path:'/js',
     component:js
    },
    {
     path:'/css',
     component:css
    },
    {
     path:'/img',
     component:img
    }
   ]  
  }
  ]
 }
 ]
})

拓展知识:解决vue在路由过程中,改变导航栏的单个点击样式的问题

当我们做一个公共底部组件,类似于tab选项卡或者导航栏,单击路由到另外一个组件上的时候,我们改变当前路由的样式问题,并且返回,样式不会初始化,因为他是由路由决定的

如果导航栏全部都是由router-link包含跳转的话,有一个非常好的方法

router-link-active

—-.router-link-active这个class,是当路由path指向当前组件时自动生成的,可以在此处设置样式(选中状态)

以上这篇当vue路由变化时,改变导航栏的样式方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
javascript数组详解
Oct 22 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 #Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 #Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 #Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 #Javascript
解决element UI 自定义传参的问题
Aug 22 #Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 #Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 #Javascript
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
win与linux系统中python requests 安装
2016/12/04 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python运行异常管理解决方案
2020/03/09 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
我的梦想演讲稿
2014/04/30 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
2015大一新生军训感言
2015/08/01 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
muduo TcpServer模块源码分析
2022/04/26 Redis