vue设置选中时的样式名称

weixin_30666753

于 2019-03-12 15:22:00 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/javascripter/p/10516933.html

本文介绍了在Vue项目中使用Router的两种方式来设置链接的激活类。第一种是在router.js中全局配置，通过mode、linkActiveClass等属性进行设置；第二种是在单条路由中局部设置，利用<router-link>的active-class属性。这些技巧有助于提升导航组件的样式定制。

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

第一种方式：在router中全局设置

export default new Router({
  mode:'history',
  linkActiveClass:'index',
  routes: [
    {
      path: '/',
      name: 'index',
      redirect:{
        path:'/home'
      }
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    }
  ]
})

第二种方式：在单条路由中设置 active-class

<router-link :to="{name:'home'}" event="mouseover" active-class="homeActive">
        home
      </router-link>

转载于:https://www.cnblogs.com/javascripter/p/10516933.html