这个是导航栏:

<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. Java设计模式—单例模式

    Singleton是一种创建型模式,指某个类采用Singleton模式,则在这个类被创建后,只可能产生一个实例供外部访问,并且提供一个全局的访问点. 核心知识点如下: (1) 将采用单例设计模式的类的 ...

  2. OpenVPN GUI出现CreateProcess错误的解决方法

    问题描述     启动 OpenVPN GUI 时失败,提示“CreateProcess Failed, exe=’X:\XXXXX\OpenVPN\bin\openvpn.exe’ cmdline= ...

  3. AB测试的需求

    一.背景 涉及到的项目是 SDK, 用户量 几千万级别,需要调整的是 订单购买整个逻辑,已经发现了低概率问题,影响到的订单不到 0.001% ,但是每周总有几个用户向客服反馈问题.整个逻辑问题,在我入 ...

  4. MVC中关于 使用后台代码 检查 用户名是否已经被清册

    在 注册页面  NewUser 的 Controller中写以下代码 public  ActionResult GetUserIndataByUserName() { string UserName= ...

  5. mouseover 有一个多次触发的问题

    mouseover 有一个多次触发的问题 需要注意 由于浏览器的冒泡行为.造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候,当鼠标移动到DIV中的child子元素的时候, ...

  6. hadoop hdfs设置quota

    quota分为两种: 1. 目录下的文件数限制 2. 目录下的空间大小 //设置文件数 hdfs dfsadmin -setQuota 1000000 /user/jenkin //设置空间大小 hd ...

  7. 20145324 《Java程序设计》第4周学习总结

    20145324 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 1.继承是为避免多个类间重复定义共同行为 A extends B A继承B的行为 2.一个子类只能继承一个父 ...

  8. XML常用标签的介绍

    1.引言 在使用Java时经常遇到使用XML的情况,而因为对XML不太了解,经常配置时粘贴复制,现在对它进行总结,以备以后使用. 2.XML常见的定义 (1)XML(Extensible Markup ...

  9. 【Swift实现代码】iOS架构模式之MVP

    1.什么是MVP? MVP是模型(Model).视图(View).主持人(Presenter)的缩写,分别代表项目中3个不同的模块. 1.1 模型 (Model):负责处理数据的加载或存储 1.2 视 ...

  10. Spring Boot CRUD+分页(基于JPA规范)

    步骤一:JPA概念 JPA(Java Persistence API)是Sun官方提出的Java持久化规范,用来方便大家操作数据库. 真正干活的可能是Hibernate,TopLink等等实现了JPA ...