vue2.0中关于active-class

vue2.0中关于active-class
一、active-class是什么，

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

官方文档：https://router.vuejs.org/zh-cn/api/router-link.html

二、在 vue-router 中要使用 active-class 有两种方法：

1、直接在路由js文件中配置linkActiveClass

 export default new Router({linkActiveClass: 'active',})

2、在router-link中写入active-class

 <router-link to="/home" class="menu-home" active-class="active">首页</router-link>

三、最近在项目中出现一个问题，使用第二种方法添加 active-class，跳转到my页面后，两个 router-link 始终都会有选中样式，代码如下

 <div class="menu-btn"><router-link to="/" class="menu-home" active-class="active">首页</router-link></div><div class="menu-btn"><router-link to="/my" class="menu-my" active-class="active">我的</router-link></div>

四、后来发现是因为 to="/" 引起的，active-class 选择样式时根据路由中的路径去匹配，然后显示，

例如：在my页面中，路由为，那么to="/”和to="/my"都可以匹配到，所有都会激活选中样式

五、要解决问题也有两种方式，都是通过加入一个 exact 属性

1、直接在路由js文件中配置linkActiveClass

 export default new Router({linkExactActiveClass: 'active',})

2、在router-link中写入exact

 <router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>

六、不过我不是用 exact 这种方法去解决的，我的方法是

 <router-link to="/home" class="menu-home" active-class="active" exact>首页</router-link>//路由中加入重定向{path: '/',redirect: '/home'}

vue2.0中关于active-class相关推荐

vue2.0中的$router 和 $route的区别
vue2.0中的$router 和 $route的区别最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $rou ...
vue2.0中的路由传值
vue2.0中的路由传值传参的三种基本用法第一种字符串拼接 //第一步:路由表 src/router/index.js { path: '/user/:userId?', // 传参第一步:在路由 ...
Vue2.0中的事件修饰符
Vue2.0中的事件修饰符: 1.prevent:阻止默认事件,原生js里面为event.preventDefault() 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture ...
vue2.0中引入wangEditor2 步骤与坑
安装:官方给出了如下安装方式点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版使用git下载: git clone htt ...
.NET 2.0 中使用Active Directory 应用程序模式 (ADAM)
Active Directory 应用程序模式 (ADAM) ,由于其目录支持和安全性.可伸缩性和本机轻型目录访问协议 (LDAP) 支持的丰富集成,Microsoft® Windows® 2000 ...
vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
php 设置跨域axios,vue2.0中proxyTable用axios进行跨域请求的设置方法
vue2.0设置proxyTable使用axios进行跨域请求的方法这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装ax ...
vue2.0中组建里面套用组件_vue2.0如何嵌套组件
显示子组件数据 {{ msg }} {{ msg }} 在2.0中这样使用浏览器会报错:[Vue warn]: Component template should contain exactly on ...
vue2.0中Ajax库（axios）
差点断更,最近换了新公司,新项目用的vue1,花了4天时间升级了大部分页面到vue2; 在main.js中导入axios,并在vue的原型上添加该实例: import axios from 'axio ...

vue2.0中关于active-class

vue2.0中关于active-class相关推荐

最新文章

热门文章