首先在data里定义一个变量
然后在需要改变的标签里写入三目运算 ,意思是当 active这个变量等于当前项的url地址的时候 会给一个active的class 类名
<div class="btn">
<div class="btn_cont" >
<div
:class="active === item.url ? 'active' : ''"
v-for="(item, index) in newsList"
:key="index"
@click="NewsDetails(item.url)"
>
{
{ item.title }}
</div>
</div>
</div>
需要写一个方法,我这里写的是跳转页面后 改变active的值为点击的url ,然后三目运算符进行运算添加class类 但是这样当点击浏览器的刷新,后退,前进按钮的时候,这个值都会回到默认值的状态
举例: 默认值为:a 页面激活, 三个页面a.,b,c
当我现在的页面是a,我点击按钮跳转到b,再点击按钮跳转到c 页面,执行后退到b页面,
这个时候这个选中状态 理应是b被选中,但是实际情况是回到了默认值a 页面被选中的状态
导致看到的和实际的不一致,怎么解决呢?看我下面的watch 方法
methods: {
NewsDetails(url) {
this.$router.push({
name: url,
});
this.active = url;
},
},
};
下边是我的数组:
newsList: [
{
title: "集团新闻",
url: "GroupNews",
},
{
title: "媒体报道",
url: "MediaCoverage",
},
{
title: "行业资讯",
url: "TradeNews",
},
],
watch 方法
首先我获取当前地址路由的name 名字 通过判断路由的name 名字 是否等于需要激活的地址名字,来给active这个变量进行赋值,再进行三目运算符的运算,就行了
immediate: true 这个会在你页面刷新的时候执行一次watch
watch: {
$route: {
// 值发生变化时的回调函数
handler(now) {
//..... // now: 变化之后的数据
// 获取当前地址路由的name 名字
let url = now.name;
if (url.includes("TradeNews")) {
this.active = "TradeNews";
} else if (url.includes("GroupNews")) {
this.active = "GroupNews";
} else {
this.active = "MediaCoverage";
}
},
immediate: true, //立即执行
},
},