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 。
  1. 在 router-link 中写入 active-class
    active-class 选择样式时根据路由中的路径(to=“/home”)去匹配,然后显示
首页

  1. 直接在路由 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.

    推荐阅读