vue.js 关于router-link的相关样式问题

zhumengzj

于 2017-07-24 12:07:21 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2

本文链接：https://blog.youkuaiyun.com/zhumengzj/article/details/76014588

vue2 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在Vue.js项目中使用router-link组件并正确设置active-class以保持高亮显示当前活动路由。通过data属性控制激活状态，实现平滑的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<router-link :to="{path: 'buildCharAuth'}" tag="li" active-class="active">
  <i class="fa fa-male"></i>
  创建角色权限
</router-link>

<router-link :to="{path: 'managePersonList'}" tag="li" active-class="active">
  <i class="fa fa-male"></i>
  管理人员列表
</router-link>

data(){
  return{
    active: false
  }
},

这里的router-link 的属性需要设置为 active-class="active", 然后在script部分的data添加 active=false;这样切换页面或者组件router才能缓存不变