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

 更新时间:2018年08月22日 14:55:17   作者:ShiYadong_  
今天小编就为大家分享一篇当vue路由变化时,改变导航栏的样式方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

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

先看下效果:

贴上我的路由文件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路由变化时,改变导航栏的样式方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3无config文件夹打包后页面空白问题及解决

    vue3无config文件夹打包后页面空白问题及解决

    这篇文章主要介绍了vue3无config文件夹打包后页面空白问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • VuePress 中如何增加用户登录功能

    VuePress 中如何增加用户登录功能

    VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的
    2019-11-11
  • 解决vue自定义指令导致的内存泄漏问题

    解决vue自定义指令导致的内存泄漏问题

    这篇文章主要介绍了解决vue自定义指令导致的内存泄漏问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 在VUE3中禁止网页返回到上一页的方法

    在VUE3中禁止网页返回到上一页的方法

    这篇文章主要介绍了在VUE3中如何禁止网页返回到上一页,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue3获取当前路由地址的两种方法

    vue3获取当前路由地址的两种方法

    近期在做ve3的项目时因为功能需要,需要获取当前路由的地址,下面这篇文章主要给大家介绍了关于vue3获取当前路由地址的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 利用vue.js把静态json绑定bootstrap的table方法

    利用vue.js把静态json绑定bootstrap的table方法

    今天小编就为大家分享一篇利用vue.js把静态json绑定bootstrap的table方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue 计算属性之姓名案例的三种实现方法

    Vue 计算属性之姓名案例的三种实现方法

    这篇文章主要介绍了Vue 计算属性之姓名案例的三种实现方法,计算属性实现、methods实现和插值语法实现,下面文章具体介绍,需要的小伙伴可以参考一下
    2022-05-05
  • 解决vue axios的封装 请求状态的错误提示问题

    解决vue axios的封装 请求状态的错误提示问题

    今天小编就为大家分享一篇解决vue axios的封装 请求状态的错误提示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • element table 数据量大页面卡顿的解决

    element table 数据量大页面卡顿的解决

    这篇文章主要介绍了element table 数据量大页面卡顿的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • easycom模式开发UNI-APP组件调用必须掌握的实用技巧

    easycom模式开发UNI-APP组件调用必须掌握的实用技巧

    uni-app基于VUE开发,通常组件的使用都是先安装,然后全局或者局部引入,注册,今天通过本文给大家分享easycom模式开发UNI-APP组件调用必须掌握的实用技巧,需要的朋友一起看看吧
    2021-08-08

最新评论