1.to属性

之前我们学习的路由地址都是自己手动输入的，没有任何的触发条件，此时我们可通过router-link设置点击跳转的元素

 

1 <template>
2 <div>
3     <router-link to='home'>点击跳转到home</router-link>
4     <router-link to='sport'>点击跳转到sport</router-link>
5     <!-- 显示区域 -->
6     <router-view></router-view>
7 </div>
8 </template>

 

声明式导航_手动输入

 

 

 

此时我们发现点击sport或者home，router-view组件会显示对应的组件内容

机理router-link组件默认渲染为带有正确链接的<a>标签

to属性是必传属性

1 <router-link to='home'>点击跳转到home</router-link>

此时就代表跳router-view显示的是/home的页面地址

 

2.tag属性

 

由于router-link默认会加载为a标签，此时可以通过tag属性进行配置

默认显示

声明式导航_手动输入_02

 

 

 

此时我们将tag配置为了li

1 <template>
2     <div>
3         <!--显示区域-->
4             <router-link to='home' tag="li">点击跳转到home</router-link>
5             <router-link to='sport'  tag="li">点击跳转到sport</router-link>
6         <router-view></router-view>
7     </div>
8 </template>

 

声明式导航_属性设置_03

 

 

 

3.active-class属性

active-class属性的作用是添加被激活的class类名

 

1 <template>
2     <div>
3         <!--显示区域-->
4             <router-link to='home' tag="li" active-class="aclass">点击跳转到home</router-link>
5             <router-link to='sport' tag="li" active-class="aclass">点击跳转到sport</router-link>
6         <router-view></router-view>
7     </div>
8 </template>

 

1 <style scoped>
2 li{
3     font-size: 18px;
4 }
5 .aclass{
6     color: red;
7 }
8 </style>

 

声明式导航_加载_04

 

 

 

如果不设置active-class此时默认被激活的class类名是.router-link-active

1 <style scoped>
2 li{
3     font-size: 18px;
4 }
5 .router-link-active{
6     color: purple;
7 }
8 </style>

 

声明式导航_类名_05

 

 

 

我们也可以进行全局配置默认被激活class

 1 import vue from "vue"
 2 import vueRouter from "vue-router"
 3 import Home from "../views/Home.vue"
 4 import Sport from "../views/Sport.vue"
 5 vue.use(vueRouter)
 6 let router=new vueRouter({
 7     linkActiveClass:'is-active',   //全局添加这个属性
 8     routes:[
 9         {
10             path:'/home',
11             component:Home
12         },
13         {
14             path:'/sport',
15             component:Sport
16         }
17     ]
18 })
19 
20 export default router

 

1 <style scoped>
2 li{
3     font-size: 18px;
4 }
5 .is-active{
6     color: red;
7 }
8 </style>

声明式导航_属性设置_06

 

 

 

 4.exact

exact属性是精确匹配的意思

比如我们的路由地址有/add和/add/a，如果触发了/add/a，此时/add的路由也会被激活class状态

1 <template>
2     <div>
3         <!--显示区域-->
4             <router-link to='/home'  tag="li" >点击跳转到home</router-link>
5             <router-link to='/home/add' tag="li" >点击跳转到sport</router-link>
6         <router-view></router-view>
7     </div>
8 </template>

此时我们点击home/add，此时home也会添加一个被激活的类

声明式导航_类名_07

 

 

 

可以设置exact属性

1 <template>
2     <div>
3         <!--显示区域-->
4             <router-link to='/home' exact tag="li" >点击跳转到home</router-link>
5             <router-link to='/home/add' tag="li" >点击跳转到sport</router-link>
6         <router-view></router-view>
7     </div>
8 </template>

声明式导航_手动输入_08

 

 

 

exact也有自己精确匹配的class

1 <template>
2     <div>
3         <!--显示区域-->
4             <router-link to='/home' exact exact-active-class="eclass" tag="li" >点击跳转到home</router-link>
5             <router-link to='/home/add' tag="li" >点击跳转到sport</router-link>
6         <router-view></router-view>
7     </div>
8 </template>
1 .eclass{
2     color: blue;
3 }

 

声明式导航_属性设置_09

 

 

 

5. event属性

可以通过event属性设置router-link被触发的方式

1 <template>
2     <div>
3         <!--显示区域-->
4             <router-link to='/home' event='mouseenter' tag="li" >点击跳转到home</router-link>
5             <router-link to='/home/add' event='mouseenter' tag="li" >点击跳转到sport</router-link>
6         <router-view></router-view>
7     </div>
8 </template>

声明式导航_a标签_10

 

 

 

此时router-link触发的方式鼠标移上

 

6.replace属性

路由跳转有router和replace，如果是router会记录跳转地址，replace不会记录

声明式导航_a标签_11

 

 

 如果我们用的router此时可以倒退，

但是我们添加了replace之后就不会发生了跳转，此时不能点击

1 <template>
2     <div>
3         <!--显示区域-->
4            <router-link to='/home' replace tag="li">点击跳转到home</router-link>
5              <router-link to='/home/add' replace tag="li">点击跳转到sport</router-link>
6         <router-view></router-view>
7     </div>
8 </template>

 

 

7.append属性

append属性是在当前的路由基础之上，进行累加，而不是重构

1 <template>
2     <div>
3         <!--显示区域-->
4            <router-link to='home' append tag="li">点击跳转到home</router-link>
5              <router-link to='sport' append tag="li">点击跳转到sport</router-link>
6         <router-view></router-view>
7     </div>
8 </template>

 

 

 

 声明式导航_属性设置_12

 

 

此时页面会有反复累加的状态

注意，如果需要设置需要append状态的路由，前面别加/

1 <template>
2     <div>
3         <!--显示区域-->
4            <router-link to='/home' append tag="li">点击跳转到home</router-link>
5              <router-link to='/sport' append tag="li">点击跳转到sport</router-link>
6         <router-view></router-view>
7     </div>
8 </template>

 

上面的路由由于加了/所以不会进行路由的叠加