设置一个切换路由时,改变激活路由的样式
-
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>