Vue路由如何设置导航选中（高亮）

本文内容知识点比较简单，主要面向vue新手朋友们解答疑惑。vue前辈请忽略。

我自己学习vue的时候也有遇到过这个情况，看到一些新人朋友们在问，vue的路由怎么设置选中(高亮)呀？默认class是否可以不显示呀？请看下文 ?

一、设置选中(高亮)

知识点：

router-link 作为 vue 中的路由跳转标签，它内置有一个选中的状态，当处于当前路由时，会给 router-link 加上两个类名：router-link-active 和 router-link-exact-active。

router-link-active：设置链接激活时使用的 CSS 类名
router-link-exact-active：配置当链接被精确匹配的时候应该激活的 class

当你了解到上面知识点之后就容易了，我们可以通过默认类名来设置样式就好了。例如：

.nav li > a.router-link-active{ font-weight: bold;}
.nav li > a.router-link-active span::before{ content: ''; width: 100%; height: 1px; display: block; }

二、去掉默认类名 / 修改默认类名

知识点

router-link-active:全局配置的默认“激活 class 类名”
linkExactActiveClass：全局配置精确激活的默认的 class

想要修改或者去掉默认类名只需在路由文件里面配置即可，例如：

export default new Router({linkActiveClass: 'active',linkExactActiveClass: 'active',routes: [.... //这里是路由配置]
});

见上面代码，已经把 linkActiveClass 和 linkExactActiveClass 都改成了"active"，如果此处设置为空，则页面中就不会显示默认类名

以上内容如有错误，请各朋友指正，谢谢。

Vue路由如何设置导航选中（高亮）相关推荐

Vue路由守卫（导航守卫）及使用场景
目录前言一.路由守卫是什么? 二.路由守卫全解析先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫单独介绍一下路由守卫钩子三个参数前言最近在学习vu ...
iView+VUE根据数据设置表格行高亮
我这里的业务场景是左侧列表点击各行会显示其对应的数据在右侧现将右侧一数据移动到左侧另一行麾下当前选中高亮行应进行切换这里采取监听方式监听用户是否对数据进行了移动到其他地方如果有将移动到的 ...
Vue项目设置导航栏高亮
Vue实现点击切换导航栏效果编译环境 Vue2.x 版本期待实现的效果图解决思路通过设置动态class的方式,通过点击传递此时所点击item的索引值,当索引值和所设置的初始值相等时,动态cla ...
Vue路由守卫（导航守卫）
路由守卫包括全局守卫(beforeEach()).路由独享守卫(beforeEnter()).组件内守卫(beforeRouteEnter().beforeRouteLeave()) 1.全局守卫(b ...
vue路由中设置linkActiveClass
路由 export default new Router({linkActiveClass: 'active',//设置链接激活时使用的 CSS 类名.默认值可以通过路由的构造选项 linkActi ...
vue路由当中的导航钩子中关于next这个方法的描述应该如何理解？
随笔记录 2019.05.16 11:30:00 浦东张江阴转多云 20-23 本文转载自:https://blog.csdn.net/helenwei2017/article/details/80 ...
Vue element el-select 设置默认选中
<el-form-item label="状态:"><el-select v-model="MissionTemplateForm.state" ...
html中select标签默认选择,HTML中的select标签如何设置默认选中的选项
方法有两种. 第一种通过的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 1 option > 2 option > 3 option &g ...
Vue路由设置嵌套（一级二级三级展示并且显示定向选中）
router.js import Vue from 'vue' import Router from 'vue-router' // 引入页面一级 import Home from './views/ ...
Vue - 路由导航守卫控制访问权限，设置 localStorage 过期时间
Vue 路由导航守卫控制访问权限,设置 localStorage 过期时间一. 路由导航守卫二. 路由导航守卫简单使用三. 使用路由导航守卫设置 token 过期时间导航守卫: https: ...

Vue路由如何设置导航选中（高亮）

一、设置选中(高亮)

二、去掉默认类名 / 修改默认类名

Vue路由如何设置导航选中（高亮）相关推荐

最新文章

热门文章