在用Vue实现点击切换active，并切换路由时遇到的问题

最新推荐文章于 2023-01-03 14:33:14 发布

Hook..

最新推荐文章于 2023-01-03 14:33:14 发布

阅读量360

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_57596347/article/details/127045630

版权

想要在vue中实现点击切换active样式，可以使用以下方法：

<li :class="activeClass == index ? 'active':''" v-for="(i,index) in xxx" :key="index" @click="getItem(index)">
    {{xxx.x}}
</li>

使用这种方法只需要：

在 data 中增加一个变量 activeClass ，储存当前点击的元素
在 style 里写上 .active 样式
点击事件：改变 data 中 activeClass 的值

这样就能实现点击切换active，相较于非循环实现而言更为方便简洁

但是我想在这个基础上实现 路由的切换 ，就不知道该怎么办了

最后只能选择了以下写法：

<li :class="{active: isActive === 1}" @click="changClass(1)">
    <router-link to="/personal/recent">最近</router-link>
</li>
<li :class="{active: isActive === 2}" @click="changClass(2)">
    <router-link to="/personal/article">文章</router-link>
</li>

然后在点击事件中将 data 中的 isActive 修改为传入的值

这样写非常麻烦，很笨，代码也显得不简洁，但是暂时还没找到好的方法

先把这个问题放在这（求个解决办法！！！）