您现在的位置是:首页 > Javascript
当前栏目
vue2.0中关于active-class
2023-02-19 12:23:03 时间
一、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'
}
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项