Vue router-link设置激活时的样式

目录

场景

方法

代码

router.js

App.vue

Home.vue

About.vue

---

场景

效果如上图所示，点哪个标签该标签就显示绿色背景（即标签被激活的样式）

方法

  使用router-link的exact-active-class属性，该属性设置当前标签被激活的样式

代码

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

App.vue

Home.vue

About.vue