当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 相关文章推荐
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
微信小程序关键字变色实现代码实例
Dec 13 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
PHP的Yii框架入门使用教程
2016/02/15 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
Python代码的打包与发布详解
2014/07/30 Python
Python迭代器和生成器介绍
2015/03/06 Python
Python 的 Socket 编程
2015/03/24 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Python入门之后再看点什么好?
2018/03/05 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python复制文件到指定目录的实例
2018/04/27 Python
python中class的定义及使用教程
2019/09/18 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
接口可以包含哪些成员
2012/09/30 面试题
出国考察邀请函
2014/01/21 职场文书
安全标准化汇报材料
2014/02/03 职场文书
项目总经理岗位职责
2014/02/14 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电