当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 写类方式之八
Jul 05 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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实现图片简单上传
2006/10/09 PHP
如何在PHP中进行身份认证
2006/10/09 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
利用php生成验证码
2017/02/23 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
基于jquery实现的自动补全功能
2015/03/12 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python socket实现简单聊天室
2018/04/01 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
零基础学python应该从哪里入手
2020/08/11 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
介绍一下代理模式(Proxy)
2014/10/17 面试题
小学庆六一活动方案
2014/02/28 职场文书
教务处教学工作总结
2015/08/10 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python