每次路由切换成功进入激活状态
在点击导航栏的时候,让被点击的那一个有背景色,其他的没有背景色?
如何做?
在路由里面设置 linkActiveClass: ‘is-active’,
const router = new VueRouter({
routes,
linkActiveClass: 'is-active'
});
然后在css里面设置
.is-active{
background:red;
}
权重不够高没有显示可以加父元素增加权重
这样被点击激活的时候就会被加上is-active这个class了。注意如果没有设置router-link的标签类型,会是<a>
标签,<a>
标签是没有宽度和高度的。那么我们需要设置成div。然后才会背景颜色的变化。
<router-link to='index' tag="li" event="mouseover">
将router-link 这样的a标签转化为li标签
这样 activeClass 就会根据路由的变化而动态添加了。
这里 还会遇到一个问题。
比如 我这里有个侧边导航栏,其中有一项是 我的钱包,路由配置为’/myWallet’,从’/myWallet’页面 可以操作提现,会进入’/withdraw’提现页面,此时,路由发生变化,activeClass将随着路由的变化,从’/myWallet’ 身上移到’/withdraw’上了,侧边栏的active Class 不再了。
如何 在’/myWallet’ 页面,也要 ‘/myWallet’ 这个页面的active Class 保留住呢?
或者说,我们可以自己来操控 active Class 给加的位置,并不想它随着路由的改变而改变。
这里,去掉router 文件夹下 index.js 里面的linkActiveClass: ‘is-active’ 的配置,不去使用这个属性。
解决思路:给’/withdraw’ 加上一个路由元信息,在侧边栏去检查路由元信息,然后看是否需要给其active class
{
path: '/myWallet',
name: 'MyWallet',
component: MyWallet,
meta: {
requiresAuth: true,
active: '/MyWallet'
}
},
{
path: '/withdraw',
name: 'Withdraw',
component: withdraw,
meta: {
requiresAuth: true ,
active: '/MyWallet'
}
},
例如
<router-link tag="li" class="li-item" to="/MyWallet" :class="{'is-active':$route.meta.active === '/MyWallet'}">我的钱包</router-link>
在侧边栏的时候,会取到当前路由的this.$route.meta.active 然后跟’/MyWallet’进行判断。
这样就实现了 在 提现 或者 转账的页面的class active 会给到侧边栏的 我的钱包 身上。
当然,如果只有一个页面 对应一个active的
就不用添加 meta下面的active属性了
<router-link tag="li" class="li-item" to="/userinfo"
:class="{'is-active':$route.path === '/userinfo'}">{{ $t("sidebar.PersonalInformation") }}
</router-link>
只需要拿到当前的路由地址进行判断就ok
————————————————
版权声明:本文为CSDN博主「cofecode」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/cofecode/article/details/80663259