vue-router为激活的路由设置样式操作

更新时间：2020年07月18日 10:03:11 作者：丶Eric

这篇文章主要介绍了vue-router为激活的路由设置样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

1.首先先写好类名

2.在router里的js文件中添加 linkActiveClass:'active'

补充知识：记录vue遇到问题，子页面没有router-link对应导航栏激活样式

如下所示：

li><router-link to="/basicSearch" :class="{'link-active':linkBoolean}">基础检索</router-link></li>

 data () {
 return {
  imgUrl,
  linkBoolean:false
 }
 },
 created(){
 
 if(this.$route.path == "/storeDetails" || this.$route.path == "/utxoDetails" ||      
 this.$route.path == "/blockAllDetails"){
  this.linkBoolean = true
 }
 },

根据Router中子页面链接名称，指定对应上级页面的导航样式是否激活

以上这篇vue-router为激活的路由设置样式操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue使用csp的简单示例
Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用,下面这篇文章主要给大家介绍了关于vue使用csp的相关资料,需要的朋友可以参考下
2022-08-08
Vue3+Element Plus实现el-table跨行显示(非脚手架)
这篇文章主要介绍了Vue3+Element Plus实现el-table跨行显示(非脚手架),本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
Vue watch原理源码层深入讲解
watch 是由用户定义的数据监听，当监听的属性发生改变就会触发回调，这项配置在业务中是很常用。在面试时，也是必问知识点，一般会用作和 computed 进行比较。那么本文就来带大家从源码理解 watch 的工作流程，以及依赖收集和深度监听的实现
2022-10-10
详解Vue CLI3配置解析之css.extract
这篇文章主要介绍了详解Vue CLI3配置解析之css.extract,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Vue利用广度优先搜索实现watch
这篇文章主要为大家学习介绍了Vue如何利用广度优先搜索实现watch（有意思），文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-08-08
vue实力踩坑当前页push当前页无效的解决
这篇文章主要介绍了vue实力踩坑当前页push当前页无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vuex子模块调用子模块的actions或mutations实现方式
这篇文章主要介绍了Vuex子模块调用子模块的actions或mutations实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
如何在Vue项目中使用vuex
这篇文章主要介绍了如何在Vue项目中使用vuex问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue登录路由验证的实现
这篇文章主要为大家详细介绍了vue登录路由验证的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-12-12
vue项目使用lodash节流防抖函数问题解决方案
在lodash函数工具库中，防抖 _.debounce 和节流 _.throttle 函数在一些频繁触发的事件中比较常用，这篇文章主要介绍了vue项目使用lodash节流防抖函数问题与解决,需要的朋友可以参考下
2023-10-10