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. html5 图片墙

    代码实例: <!DOCTYPE html> <html> <head> <style> body,html{ padding:0;margin:0;wi ...

  2. NCRE训练二

    package com.fei.ncre; import java.io.RandomAccessFile; /** * 该程序的功能是将本程序代码打印输出 */ public class Java_ ...

  3. Java 9 在win10环境搭建

    Java SDK 下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-3848520.html JA ...

  4. codeforces 111A/112C Petya and Inequiations

    题目:Petya and Inequiations传送门: http://codeforces.com/problemset/problem/111/A http://codeforces.com/p ...

  5. [CSP-S模拟测试]:w(树上DP)

    题目背景 $\frac{1}{4}$遇到了一道水题,双完全不会做,于是去请教小$D$.小$D$看了${0.607}^2$眼就切掉了这题,嘲讽了$\frac{1}{4}$一番就离开了.于是,$\frac ...

  6. 2019-2020-1 20175223 《信息安全系统设计基础》MyOD

    目录 一.要求 二.设计流程 1. 需求分析 2. 概要设计 伪代码 3. 详细设计 main.c tans_0x.c tans_pr.c tansp.h 三.编写Makefile,并制作动.静态库 ...

  7. python中的list和generator

    # -*- coding:utf-8 -*- # author : Keekuun # 列表生成式,list l1 = [i for i in range(10)] # 或者 l2 = list(ra ...

  8. nginx配置-location

    以 =开头表示精确匹配如 A 中只匹配根目录结尾的请求,后面不能带任何字符串. ^~ 开头表示uri以某个常规字符串开头,不是正则匹配 ~ 开头表示区分大小写的正则匹配; ~* 开头表示不区分大小写的 ...

  9. 建站手册-浏览器信息:挪威的 Opera 浏览器

    ylbtech-建站手册-浏览器信息:挪威的 Opera 浏览器 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_opera.asp 2. ...

  10. 头疼3-4次的问题,数据从DB导出到EXCEL,再从EXCEL导入到DB,数据格式发生错误 ,导致 程序出错。

    反思: 1 解决 问题的思路 绕远了: 在这个问题出现前,程序是运行正确 的 问题出现前,我误删了DB 的 testcase表的所有 case ,然后 再把邮件 中的excel数据导入到 DB 然后 ...