这个是导航栏:

<router-link to="/unusedOrder">
  <div class="">路由1</div>
</router-link>
<router-link to="/usedOrder">
  <span class="">路由2</span>
</router-link>
<router-link to="/advices">
  <span class="">路由3</span>
</router-link>
<router-link to="/evaluate">
  <span class="">路由4</span>
</router-link>
当点击路由的时候,当前元素会生成一个class为:router-link-exact-active router-link-active;
我们只需要增加router-link-exact-active或router-link-active的样式就行了

当vue路由变化时 改变导航条式样的更多相关文章

  1. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  2. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  3. vue 路由变化页面数据不刷新问题(缓存)

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. ...

  4. Vue 路由的编程式导航与history模式

    编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...

  5. vue+el-menu+vue-router实现动态导航条

    导航栏组件template <template> <div class="sidebar"> <el-menu unique-opened :defa ...

  6. VUE 路由变化页面数据不刷新问题

    出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致 ...

  7. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  8. Bootstrap入门(十三)组件7:导航条

    Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...

  9. Bootstrap 我的学习记录3 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

随机推荐

  1. [Windows Powershell]-学习笔记(5)

    Powershell自动化变量 Powershell 自动化变量 是那些一旦打开Powershell就会自动加载的变量,或者说是运行是变量. 这些变量一般存放的内容包括 用户信息:例如用户的根目录$h ...

  2. JPush相关概念

    JPush相关概念 连接极光服务器前提 在连接极光服务器之前需要先将APP进行注册,连接Server时需要用到下发的两个字段:AppKey:应用唯一标识.Master Secret:服务器秘钥,用于服 ...

  3. Android系统机制

    Android系统机制 本文主要介绍Android系统整体运行机制 Linux中的一些概念 uboot加载系统内核到内存,系统内核运行起来的后,会创建第一个用户进程叫init进程,该进程是所有用户进程 ...

  4. 前端虚拟接口mockjs的使用

    最近在学习VueJS,也进一步学习了ES6,看了一遍之后,难免手痒,所以想仿写点什么,但是数据是个问题,你总不能写个分页,写个轮播吧,但是在公司做自己的东西找后台要接口也不那么像回事,怎么办呢? 无意 ...

  5. 打印std::tuple的N总方式

    方式一:递归 + 类模板特化方式 template<typename Tuple, std::size_t N> struct tuple_printer { static void pr ...

  6. Mac OS下开启自带的apache服务

    Apache路径 /etc/apache2/ [root@GGs-MacBook-Pro:/Volumes/SSD/blog#cd /etc/apache2/ [root@GGs-MacBook-Pr ...

  7. thinkerCMS是一款thinkphp写的微型cms框架可以参考下

    http://www.thinkphp.cn/code/1764.html                       thinkphp官网thinkercms介绍 http://cms.thinke ...

  8. java switch笔记

    1. 在Java7之前,switch只能支持byte.short.char.int或者其对应的封装类以及Enum类型 2. Java7后,开始支持String 3. switch语句中,表达式的值不能 ...

  9. jenkins windows执行批处理脚本总是失败

    使用jenkins 在使用编译vc++的一个项目,在执行批处理脚本的时候总是失败, 但是在控制台无论是管理员还是普通用户都能正常编译,jenkins每次都失败,看日志就是调用一个cmd命令直接失败,e ...

  10. bzoj 3657 斐波那契数列(fib.cpp/pas/c/in/out)

    空间 512M  时限2s [题目描述] 有n个大于1的正整数a1,a2,…,an,我们知道斐波那契数列的递推式是f(i)=f(i-1)+f(i-2),现在我们修改这个递推式变为f(i)=f(i-1) ...