清河网站建设设计,时尚网站设计,搜索引擎seo关键词优化方法,潍坊 开发区网站建设active-class 属于vue-router的样式方法#xff0c;当router-link标签被点击时将会应用这个样式
一、首先#xff0c;active-class是什么#xff0c;active-class是vue-router模块的router-link组件中的属性#xff0c;用来做选中样式的切换#xff1b;相关可查阅文档当router-link标签被点击时将会应用这个样式
一、首先active-class是什么active-class是vue-router模块的router-link组件中的属性用来做选中样式的切换相关可查阅文档https://router.vuejs.org/zh-cn/api/router-link.html二、在vue-router中要使用active-class有两种方法1、直接在路由js文件中配置linkActiveClassexport default new Router({
linkActiveClass: ‘active’,})2、在router-link中写入active-class首页三、最近在项目中出现一个问题使用第二种方法添加active-class跳转到my页面后两个router-link始终都会有选中样式代码如下首页
我的
四、后来发现是因为 to/ 引起的active-class选择样式时根据路由中的路径去匹配然后显示
例如在my页面中路由为 那么to/”和to/my都可以匹配到所有都会激活选中样式五、要解决问题也有两种方式都是通过加入一个exact属性1、直接在路由js文件中配置linkActiveClassexport default new Router({
linkExactActiveClass: ‘active’,})2、在router-link中写入exact首页
六、不过我不是用exact这种方法去解决的我的方法是首页路由中加入重定向
{
path: ‘/’,
redirect: ‘/home’
}
