vue-router中的router-link的active-class

 

在vue-router中要使用选中样式的方法有两种：

1、直接在路由js文件中配置linkActiveClass

2、在router-link中写入active-class

问题：如果就这样，那么会出现一个问题，不管跳转到哪里，跳转到根目录的那个连接（to="/"）  始终都会有选中样式

      

　　为什么会这样呢？查阅文档：https://router.vuejs.org/zh-cn/api/router-link.html

知道了，如果只是添加选中样式，那么只要是以to的值开头的，都会激活选中样式

1
to="/" to="/a" to="/b"

　　为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：

　　1、直接在路由js文件中配置linkActiveClass

　　

　　2、在router-link中写入exact

　　

　　

　　好了，看看效果：

    

vue-router中的router-link的active-class的更多相关文章

  1. vue.js 中this.$router.push()的使用

    在vue项目中,跳转可以用router-link直接跳到某个页面 因为有时候会需要做一些判断等情况,所以要用到 this.$router.push() 因为外链跳转根本就不在router的设计考虑范围 ...

  2. [React Router v4] Style a Link that is Active with NavLink

    We often need to be able to apply style to navigation links based on the current route. In React Rou ...

  3. Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别

    vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...

  4. vue 中router.go；router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  5. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  6. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  7. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  8. Vue中this.$router.push（参数） 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  9. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  10. vue中的router和route有什么区别？

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

随机推荐

  1. elasticsearch 进行聚合+去重查询

    转载:https://www.jianshu.com/p/c03c3c8bf583 以客户customer为例 我想查询每日的客户数. 先按照日期分桶,然后在桶内按照 姓名来去重 来计算客户数(实际会 ...

  2. Centos 安装.NET Core环境

    https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/install 一.概述 本篇讨论如何把项目发布到Linux环境,主要包括 ...

  3. python range和arange

    range:自带函数,返回一个序列 range(起始点,终止点(不包含),步长(整数))   起始点和步长都可以省略,起始点默认为0,步长默认为1 range(1,11,2) [1,3,5,7,9] ...

  4. android智能手机如何查看APK包名

    工具/原料   智能手机一部 USB线一根 方法/步骤   1 首先.使用USB线,将电脑和手机连起来.注意.手机的USB调试默认需要打开,如下图所示. 2 然后启动电脑端的cmd应用,进入dos界面 ...

  5. springboot实战（汪云飞）学习-1-1

    java EE开发的颠覆者 spring boot 实战 随书学习-1 1.学习案例都是maven项目,首先要在eclipse 中配置 maven,主要修改maven的配置文件:配置文件下载链接: h ...

  6. orcale获取表、字段信息

    获取表字段: select * from user_tab_columns where Table_Name='用户表' order by column_name 获取表注释: select * fr ...

  7. macOS 和 Linux 的内核区别

    有些人可能会认为 macOS 和 Linux 内核之间存在相似之处,因为它们可以处理类似的命令和类似的软件.有些人甚至认为苹果公司的 macOS 是基于 Linux 的.事实上是,两个内核有着截然不同 ...

  8. webpack使用的补充

    1.分离生产环境和开发环境的wepack.config.js 我们可以将生产环境和开发环境中的配置分离为两个不同的文件,并且还维护一个共同的配置文件 common,可以通过 webpack.merge ...

  9. luogu P3768 简单的数学题 杜教筛 + 欧拉反演 + 逆元

    求 $\sum_{i=1}^{n}\sum_{j=1}^{n}ijgcd(i,j)$   考虑欧拉反演: $\sum_{d|n}\varphi(d)=n$   $\Rightarrow \sum_{i ...

  10. iOS设计模式之装饰者模式

    一,什么是装饰模式 模式定义 装饰者包含被装饰者的所有接口和引用,方法实现完全是引用调用自己的方法,在装饰者子类添加新功能. 注释: Category不要重写被装饰对象的方法,否则改变了被装饰对象的行 ...