vue-router

1.vue-router基本使用
- - 1.1安装
  - [1.2 创建路由器实例](#1.2 创建路由器实例)
  - [1.3 注入Vue实例](#1.3 注入Vue实例)
2.声明式路由导航
3.路由传参
- - [3.1 路由的querry参数](#3.1 路由的querry参数)
  - - 3.1.1传参
    - [3.1.2接收参数（this. $route.query）](#3.1.2接收参数（this.$ route.query）)
  - [3.2 路由的params参数](#3.2 路由的params参数)
  - - 3.2.1传参
    - 3.2.2接收
    - [3.2.3 在路径配置里面写占位符](#3.2.3 在路径配置里面写占位符)
  - [3.3 props传参](#3.3 props传参)
  - - [3.3.1 props接收](#3.3.1 props接收)
4.<router-link>的两种跳转模式
- - 4.1如何开启replace模式
5.编程式路由导航
- - 5.1作用：
  - [5.2 API](#5.2 API)
6.缓存路由组件（keep-alive组件）
- - [6.1 作用](#6.1 作用)
  - [6.2 实现](#6.2 实现)
  - [6.3 include属性](#6.3 include属性)

1.vue-router基本使用

1.1安装

javascript 复制代码

//如果创建项目时已经下载则忽略这一步
npm install vue-router

1.2 创建路由器实例

路由器实例是通过调用 createRouter() 函数创建的:

javascript 复制代码

import Vue from 'vue'   //引入Vue
import VueRouter from 'vue-router'  //引入vue-router
import HomeView from './HomeView.vue'//引入路由组件
import AboutView from './AboutView.vue'
Vue.use(VueRoute)//注册vuerouter
const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
]
//创建并暴露一个vue实例
export default new VueRouter({
  mode:'history',
  routes
})

1.3 注入Vue实例

javascript 复制代码

import router from './router/index.js'
new Vue({
render: h => h(App),
router
}).$mount('#app')

2.声明式路由导航

2.1导航链接

全局组件 router-link (取代 a 标签)

功能：

① 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签，to 无需 #
② 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

2.2两个类名

1.router-link-active

模糊匹配（用的多）

to="/my" 可以匹配 /my /my/a /my/b ...

只要是以/my开头的路径都可以和 to="/my"匹配到
2.router-link-exact-active

精确匹配

to="/my" 仅可以匹配 /my

2.2.1声明式导航-自定义类名（了解）

1.问题

router-link的两个高亮类名太长了，我们希望能定制怎么办
2.解决方案

我们可以在创建路由对象时，额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass

javascript 复制代码

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1",
  linkExactActiveClass: "类名2"
})

示例

javascript 复制代码

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    ...
  ], 
  linkActiveClass: 'active', // 配置模糊匹配的类名
  linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})

3.路由传参

3.1 路由的querry参数

3.1.1传参

模版字符串写法

javascript 复制代码

  <router-link :to="`/a?num=${money}&people=${you}`">a</router-link>|

对象写法

javascript 复制代码

 <router-link :to="{
      path: '/b',
      query: {
        num: money1,
        people: you1
      }
    }">b</router-link>

3.1.2接收参数（this.$route.query）

javascript 复制代码

   {{ $route.query.num}}
   {{ $route.query.people}}

3.2 路由的params参数

跟query参数一样，都是两种形式，不过params与之不同的是，它对象形式不能写path，要写路由的命名。

3.2.1传参

字符串写法

javascript 复制代码

 <router-link to="/b/小李/20">b</router-link>

对象写法

javascript 复制代码

    <router-link :to="{
      name:'那一那',
      params:{
        name:money1,
        age:you1
      }
    }">b</router-link>

3.2.2接收

javascript 复制代码

   {{ $route.params.name}}
   {{ $route.params.age}}

3.2.3 在路径配置里面写占位符

javascript 复制代码

const routes = [
  { path: '/a/:name/:age', component: rout1 },
  { path: '/b/:name/:age', component: rout2 }
]

3.3 props传参

对象式
传参

javascript 复制代码

  { path: '/b/:name/:age', name:'那一那',component: rout2 ,props:{'那一那':'大被他'}}

函数式

javascript 复制代码

  { path: '/b', name:'那一那',component: rout2 ,props({query}){return {
a:query.name,b:query.age
  }}}

布尔值（只应用于params参数）
传参

javascript 复制代码

{ path: '/a/:name/:age', component: rout1,props:true},

3.3.1 props接收

javascript 复制代码

  props:['a','b']

4.的两种跳转模式

的replace与push属性

push（默认）
有新网址的时候，它是往历史网页记录里面追加的。
replace
有新网址的时候，它直接把旧网址干掉并替换，不会保存旧网址

4.1如何开启replace模式

在标签内添加一个:replace="true"属性。因为值为true，直接写

javascript 复制代码

<router-link :replace="true" :to="`/a/${money}/${you}`">a</router-link>|
//或
<router-link replace :to="`/a/${money}/${you}`">a</router-link>|

5.编程式路由导航

5.1作用：

不借助实现路由跳转，让路由跳转更加灵活

5.2 API

借用this.$router的push和replace属性

this.$router.push({})
this.$router.replace({})
其他API
- this.$router.forward()
- this.$router.back()
- this.$router.go(n)前进n
- this.$router.go(-n)后退n

6.缓存路由组件（keep-alive组件）

6.1 作用

让不展示的路由组件保持挂载，不被销毁

6.2 实现

缓存展示区的一个组件
缓存展示区的多个组件

6.3 include属性

include这可以指定某个/某些组件切换走不被销毁，如果没有指定具体的组件，那么能够在该展示区展示的组件都不会被销毁