这个是导航栏:

<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. XDU 1003 B进制加法(高精度)

    #include<bits/stdc++.h> using namespace std; long long mpow(long long a,long long b) { ; ) ; w ...

  2. 《mysql必知必会》读书笔记--游标的使用

    游标的使用 MySQL中游标只能用于存储过程 创建游标 CREATE PROCEDURE processorders() BEGIN DECLARE ordernumbers CURSOR FOR S ...

  3. MySQL 温故知心(二) 事务的隔离级别

    事务的隔离级别 A事务做了操作 没有提交 对B事务来说 就等于没做 获取的都是之前的数据但是 在A事务中查询的话 查到的都是操作之后的数据没有提交的数据只有自己看得到,并没有update到数据库 查看 ...

  4. mysql中explain的用法

    mysql中explain的用法 最近在做性能测试中经常遇到一些数据库的问题,通常使用慢查询日志可以找到执行效果比较差的sql,但是仅仅找到这些sql是不行的,我们需要协助开发人员分析问题所在,这就经 ...

  5. Python基本知识 os.path.join与split() 函数

    Python中有join和os.path.join()两个函数,具体作用如下: join:连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符)连接生成一个新的字符串os.path.joi ...

  6. 《Java入门第三季》第二章 认识 Java 中的字符串

    什么是 Java 中的字符串.1.在Java的世界里,字符串被作为String类型的对象处理. 2.通用的初始化的方式:String s = new String("i love you & ...

  7. 微信开放平台--》网站应用开发 微信登录网站接口(https://open.weixin.qq.com/)

    地址:https://open.weixin.qq.com/ 手册:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&am ...

  8. CSS Position(定位)

    CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...

  9. CentOS 7配置静态IP地址

    [root@centos1 ~]# ifconfig -bash: ifconfig: command not found 首先,习惯性的输入echo $PATH(查看当前PATH环境变量,跟DOS的 ...

  10. 自学Java测试代码 - 简单地Student类

    2017-08-23  23:45:38 writer:pprp 写这个还蛮开心的 package test; public class Student { //创建成员变量 String name ...