vue添加点击之后的样式问题

Question

如何给左侧的按钮添加点击之后的效果(也就是说现在点击没效果，不看地址栏都不知道自己点了哪个)

问题是这里要出现两个点击事件，我试了好多方法都不行

这里我用到了Vue的动态路由匹配

.itemLeft
    .topicItem(@click="$router.push('/hottopic/topic/小微企业专题')") 小微企业专题
    .topicItem(@click="$router.push('/hottopic/topic/固定资产出租专题')") 固定资产出租专题
    .topicItem(@click="$router.push('/hottopic/topic/视同销售专题')") 视同销售专题
    .topicItem(@click="$router.push('/hottopic/topic/营改增专题')") 营改增专题
.itemRight
    p(v-for="(i,n) in data" :key="n" @click="$router.push('/hottopic/details?id='+i.id)") {{i.title}}

Answer 1

问题已解决，正确答案：

.topicItem(:class="$route.params.id==='小微企业专题' ? 'active' : ''" @click="$router.push('/hottopic/topic/小微企业专题')") 小微企业专题
.topicItem(:class="$route.params.id==='固定资产出租专题' ? 'active' : ''" @click="$router.push('/hottopic/topic/固定资产出租专题')") 固定资产出租专题
.topicItem(:class="$route.params.id==='视同销售专题' ? 'active' : ''" @click="$router.push('/hottopic/topic/视同销售专题')") 视同销售专题
.topicItem(:class="$route.params.id==='营改增专题' ? 'active' : ''" @click="$router.push('/hottopic/topic/营改增专题')") 营改增专题

Answer 2

1. 用<router-link>标签的话有专用的activerouter-link-active和router-link-exact-active。
2. 用js跳转的话就判断<tag @click="xxx" :class="{active: name === $route.name/(或者route.params.name等等)}"/>吧。

Answer 3

你路由怎么配的

Answer 4

在左侧加一个标识来识别当前的选中项吧；每一个li对应的路由是已知的；然后通过router.name来做判断；为true是有该选中样式

Answer 5

router-link.topicItem(tag="div", to="/hottopic/topic/小微企业专题", active-class="active")

还是觉得用router-link好点。
https://router.vuejs.org/zh-c...

Answer 6

声明时导航吧，router-link