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. .net core 操作oracle

    依赖项——右键——管理NuGet程序包——浏览——输入以下内容 oracle.ManagedDataAccess.core(记得勾选包括预发行版) 在页面中加入操作数据库的方法 public IAct ...

  2. .net core 添加NLog

    依赖项——右键——管理NuGet程序包——浏览——输入以下内容 Install-Package NLog.Extensions.Logging -Pre 在根目录下添加nlog.config   更改 ...

  3. ubuntu 安装apache2 二进制包

    官方安装教程  http://httpd.apache.org/docs/2.4/install.html 一.下载安装包 进入https://httpd.apache.org/download.cg ...

  4. SDOI前的小计划

    upd:19.4.5 放出来了.如果明天考了我没复习到的认了.考到了复习了的还没拿到理想分的就回来谢罪(bushi www SDOI一轮倒计时4天啦w 所以得有个小计划吧QwQ 4.2 目标:BZOJ ...

  5. tuple unpacking

    拆开Tuple lax_coordinates = (33.9425, -118.408056) latitude, longitude = lax_coordinates # tuple unpac ...

  6. Linux批量新建文件夹(大括号表达式的应用)

    如果想要批量新建文件夹来存放照片,按照年份和月份,格式为YYYY-MM.可以使用下面命令批量新建: mkdir {2007..2009}-{01..12} 结果如下: 2007-01 2007-07 ...

  7. springMVC的controller更改了,如何不重启,而自动刷新的解决办法(亲测,一招解决)

    Tomcat  con/ service.xml  配置如下一行代码: <Context reloadable="true"/> </Host> 然后以de ...

  8. 英语单词escapes

    escapes 来源 [root@centos7 ~]# help echo echo: echo [-neE] [arg ...] Write arguments to the standard o ...

  9. python学习笔记(一)python简介和基础

    1.什么是python? python是一种面向对象的,解释型的计算机语言,它的特点是语法简介,优雅,简单易学.1989年诞生,Guido(龟叔)开发. 编译型语言:代码在编译之后,编译成2进制的文件 ...

  10. Alex and Number

    Alex and Number 时间限制: 1 Sec  内存限制: 128 MB提交: 69  解决: 12[提交][状态] 题目描述 Alex love Number theory. Today ...