vue|active-class 属于哪个组件中的属性(该如何使用?)
【vue|active-class 属于哪个组件中的属性(该如何使用?)】
目录
- 前言
- 一、active-class
- 二、引起的问题
- 三、解决方法
-
- 1. 在 router-link 中写入 exact
- 2. 在路由中加入重定向
- 总结
前言 首先 active-class 是 vue-router 模块中 router-link 组件中的属性,主要作用是用来实现选中样式的切换,在 vue-router 中要使用 active-class 。
一、active-class 首先 active-class 是 vue-router 模块中 router-link 组件中的属性,主要作用是用来实现选中
样式的切换,在 vue-router 中要使用 active-class 。
- 在 router-link 中写入 active-class
active-class 选择样式时根据路由中的路径(to=“/home”)去匹配,然后显示
首页
- 直接在路由 js 文件中配置 linkActiveClass
export default new Router({ linkActiveClass: 'active',
})
二、引起的问题 因为 to="/" 引起的,active-class 选择样式时根据路由中的路径去匹配,然后显示,
例如在 my 页面中,路由为 localhost:8081/#/my,那么 to="/”和 to="/my"都可以匹配到,所有
都会激活选中样式
三、解决方法 1. 在 router-link 中写入 exact
首页
2. 在路由中加入重定向
首页 {
path: '/', redirect: '/home' }
总结 Better to ask the way than go astray.
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 代笔(想象)
- 每一个节气
- 很多网红在用的素颜霜,你知道它是属于护肤品还是化妆品吗()
- VueX--VUE核心插件
- 2018-11-27今天属于宇宙,这是我送给他的礼物|2018-11-27今天属于宇宙,这是我送给他的礼物|我的奇迹日记Day27
- 取悦应该属于自己
- vue组件中为何data必须是一个函数()
- 用npm发布一个包的教程并编写一个vue的插件发布