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

天一同学
  • 199

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

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

这里我用到了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}}

图片描述
图片描述

回复
阅读 3.1k
6 个回答
天一同学
  • 199
✓ 已被采纳

问题已解决,正确答案:

.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/营改增专题')") 营改增专题
toBeTheLight
  • 16.6k
  1. 用<router-link>标签的话有专用的activerouter-link-activerouter-link-exact-active
  2. 用js跳转的话就判断<tag @click="xxx" :class="{active: name === $route.name/(或者route.params.name等等)}"/>吧。

你路由怎么配的

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

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

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

声明时导航吧,router-link

宣传栏