vue-router中的router-link的active-class
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的更多相关文章
- vue.js 中this.$router.push()的使用
在vue项目中,跳转可以用router-link直接跳到某个页面 因为有时候会需要做一些判断等情况,所以要用到 this.$router.push() 因为外链跳转根本就不在router的设计考虑范围 ...
- [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 ...
- Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别
vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...
- vue 中router.go;router.push和router.replace的区别
vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...
- vue中使用router全局守卫实现页面拦截
一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...
- vue中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- Vue router中携带参数与获取参数
Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...
- Vue中this.$router.push(参数) 实现页面跳转
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- vue中的router和route有什么区别?
我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...
随机推荐
- html5 图片墙
代码实例: <!DOCTYPE html> <html> <head> <style> body,html{ padding:0;margin:0;wi ...
- NCRE训练二
package com.fei.ncre; import java.io.RandomAccessFile; /** * 该程序的功能是将本程序代码打印输出 */ public class Java_ ...
- Java 9 在win10环境搭建
Java SDK 下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-3848520.html JA ...
- codeforces 111A/112C Petya and Inequiations
题目:Petya and Inequiations传送门: http://codeforces.com/problemset/problem/111/A http://codeforces.com/p ...
- [CSP-S模拟测试]:w(树上DP)
题目背景 $\frac{1}{4}$遇到了一道水题,双完全不会做,于是去请教小$D$.小$D$看了${0.607}^2$眼就切掉了这题,嘲讽了$\frac{1}{4}$一番就离开了.于是,$\frac ...
- 2019-2020-1 20175223 《信息安全系统设计基础》MyOD
目录 一.要求 二.设计流程 1. 需求分析 2. 概要设计 伪代码 3. 详细设计 main.c tans_0x.c tans_pr.c tansp.h 三.编写Makefile,并制作动.静态库 ...
- python中的list和generator
# -*- coding:utf-8 -*- # author : Keekuun # 列表生成式,list l1 = [i for i in range(10)] # 或者 l2 = list(ra ...
- nginx配置-location
以 =开头表示精确匹配如 A 中只匹配根目录结尾的请求,后面不能带任何字符串. ^~ 开头表示uri以某个常规字符串开头,不是正则匹配 ~ 开头表示区分大小写的正则匹配; ~* 开头表示不区分大小写的 ...
- 建站手册-浏览器信息:挪威的 Opera 浏览器
ylbtech-建站手册-浏览器信息:挪威的 Opera 浏览器 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_opera.asp 2. ...
- 头疼3-4次的问题,数据从DB导出到EXCEL,再从EXCEL导入到DB,数据格式发生错误 ,导致 程序出错。
反思: 1 解决 问题的思路 绕远了: 在这个问题出现前,程序是运行正确 的 问题出现前,我误删了DB 的 testcase表的所有 case ,然后 再把邮件 中的excel数据导入到 DB 然后 ...