vue 为 激活的路由设置样式

设置一个切换路由时，改变激活路由的样式

• active-class

• 类型: string

• 默认值: "router-link-active"

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

• exact

  • 类型: boolean

  • 默认值: false

"是否激活" 默认类名的依据是 inclusive match （全包含匹配）。 举个例子，如果当前的路径是 /a 开头的，那么 <router-link to="/a"> 也会被设置 CSS 类名。

按照这个规则，每个路由都会激活<router-link to="/">！想要链接使用 "exact 匹配模式"，则使用 exact 属性：

  <!-- 这个链接只会在地址为 / 的时候被激活 -->
  <router-link to="/" exact>

router

子路由有两种设置方式，分别为绝对路径型和相对路径型

使用/开头的是绝对路径

不使用的话，会自己在前面加上父级路由 

Home 使用绝对型，about使用相对型

import Vue from 'vue'
import Router from 'vue-router'
import About from '../components/About/About'
import About1 from '../components/About/About1'
import About2 from '../components/About/About2'

import Home from '../components/Home/Home'
import Home1 from '../components/Home/Home1'
import Home2 from '../components/Home/Home2'
import Home3 from '../components/Home/Home3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/home/home1',
          component: Home1
        },
        {
          path: '/home/home2',
          component: Home2
        },
        {
          path: '/home/home3',
          component: Home3
        }
      ]
    },

    {
      path: '/About',
      component: About,
      children: [
        {
          path: 'About1',
          component: About1
        },
        {
          path: 'About2',
          component: About2
        },
      ]
    },

    {
      path: '/*',
      redirect: '/home'
    }
  ]
})

app

<div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
    <router-view/>
  </div>

在app中设置全局样式，当路由激活时会自动加上这个样式

  .router-link-active {
    background: aqua;
  }

home

<div style="display: flex;flex-direction: column">
    <router-link to="/home/home1">home1</router-link>
    <router-link to="/home/home2">home2</router-link>
    <router-link to="/home/home3">home3</router-link>
    <router-view></router-view>

  </div>

about

 <div style="display: flex;flex-direction: column">
    <router-link to="/about/about1">about1</router-link>
    <router-link to="/about/about2">about2</router-link>
    <router-view></router-view>
  </div>