简介

vue-router简称Vue路由器，是开发SPA单页应用必备的一个Vue插件库

作用

用于实现SPA单页应用里的页面切换（页面导航）

什么是SPA应用？
1、整个应用只有一个页面（index.html）
2、点击页面中的导航链接不会刷新整个页面，而是局部刷新
3、页面上的数据全靠ajax技术获取

什么是路由

一个路由就是一组映射关系（key --> value）
key是路径，value是function或component

根据你的路径，由我（路由器）来决定展示哪个组件（执行哪个处理函数）

路由分类

前端路由（网址路径 --> 组件）
后端路由（请求路径 --> 处理函数）

集成

安装

npm i vue-router

使用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

创建路由器

import VueRouter from 'vue-router'

// 导入视图组件
import Home from '@/views/Home'
import About from '@/views/About'

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

关联路由器

import router from '@/plugins/router'

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

内置标签（2个）

路由导航标签

用于生成导航链接，便于用户操作来切换界面

<router-link>

路由展示标签

用于指定路由对应的组件展示位置

<router-view>

嵌套路由

嵌套路由就是在当前路由配置项中新增一个配置项children，与routes配置一样，如下：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      children: [
        {
          // 当 /user/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

注意：子路由path选项不要使用/带头，因为以 / 开头的嵌套路径会被当作根路径

优化路由组件使用传参

优化前

无论是通过 params 方式还是 query 方式进行传参，最终路由组件使用传过来的参数，代码都如下：

<p>{{$route.params.id}}</p>
<p>{{$route.query.title}}</p>

// js代码使用
new Vue({
    name: "User",
    methods: {
        test(){
            console.log(this.$route.params.id);
            console.log(this.$route.query.title);
        }
    }
});

上面代码有2大弊端：

代码书写过于繁琐。每次使用传参都要$route.params.xxxx或者$route.query.xxxx
组件信息不明确。当开发者需要重用这个路由组件时，无法一眼就知道这个路由组件所需参数信息

优化后，使用路由props配置项

作用：让路由组件更方便接收传参

第一种写法：对象

props配置项值为对象，该对象中所有的key-value的组合最终都会通过props传给路由组件

传参是静态的，很少用

第二种写法：布尔值

props配置项值为布尔类型，为true时，则把路由接收到的所有params参数通过props传给路由组件

这种方式的局限性在于只能传params参数，而不能传query参数

第三种写法：回调函数

props配置项值为函数，该函数接收到一个$route参数，返回一个对象，对象中key-value通过props传给路由组件

这种方法功能强大，params和query参数都能传，常用

编程式路由导航

不借助<router-link>标签实现路由导航，就是编程式路由导航，让路由导航更加灵活

好处

编程式导航比声明式导航功能更加强大，推荐使用编程式路由导航，例如：点击后，3秒再跳转

push 追加

默认路由导航模式

this.$router.push({
    name: 'about',
    params: {
        id: xxx,
        title: yyy
    }
})

replace 替代

this.$router.replace({
    name: 'about',
    params: {
        id: xxx,
        title: yyy
    }
})

forward 前进

this.$router.forward()

back 后退

this.$router.back()

go 任意跳转

this.$router.go(3)  // 正数是前进，负数是后退

路由导航模式

每次点击导航链接，都会对浏览器历史记录进行操作，操作有2种模式：追加、替换

这种操作会对浏览器的前进和后退产生影响

追加模式 push

这种是<router-link>默认操作模式，对应的编码式路由导航接口 push()

替换模式 replace

作用：替换当前历史记录

如何开启替换模式？

<router-link replace to="/about">跳转到about</router-link>

对应的编码式路由导航接口 replace()

新增生命周期函数

路由组件独有的2个新增生命周期函数分别是：activated 和 deactivated

只有路由组件有，普通组件没有的

activated // 路由组件被激活时触发

deactivated // 路由组件失活时触发

keep-alive 路由组件缓存

由于路由切换的实现原理是：旧组件销毁，新组件创建挂载，导致表单页面再切换回来后原本填了一大堆信息不见了，为了保留路由组件在切换前所填写的信息，Vue内置了一个组件keep-alive

找到路由组件呈现的位置，一般都是<router-view>标签，在外层加上<keep-alive>标签

// 默认里面的所有路由组件都缓存
<keep-alive>
    <router-view></router-view>
</keep-alive>

// 只缓存某一个路由组件（组件名称，非路由名称）
<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

// 缓存多个路由组件（组件名称，非路由名称）
<keep-alive include="['News', 'User']">
    <router-view></router-view>
</keep-alive>

路由守卫

对路由进行权限控制，分为：全局（前置、后置）守卫、独享守卫、组件内守卫

全局守卫

// 全局前置路由守卫 —— 初始化时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    // 权限校验
})

// 全局后置路由守卫 —— 初始化时候被调用、每次路由切换之后被调用
router.afterEach(() => {

})

独享路由守卫

某个路由独享的路由守卫，只针对某个路由起作用，只有前置独享路由守卫，没有后置的

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      beforeEnter(to,from,next){
          // 独享，个性化的东西写在这
      }
    }
  ]
})

组件内路由守卫

只有通过路由规则来加载的组件（路由组件）才能使用此守卫，普通的导入注册再以标签形式使用的无法使用此路由守卫

写在组件内部，和data配置项同级

// 进入守卫，通过路由规则，进入该组件时调用
beforeRouteEnter(to, from, next){

}

// 离开守卫，通过路由规则，离开该组件时调用
beforeRouteLeave(to, from, next){

}

执行优先级

注意点

组件分为路由组件和普通组件，路由组件存放在views文件夹中，普通组件存放在component文件夹中
通过切换，“隐藏”掉的组件，默认是销毁掉的，需要显示时再重新创建挂载
每一个路由组件都有自己的$route路由属性，里面存着自己的路由信息
整个应用只有一个router，可以通过组件$router路由器属性获取

前端学习日记 # Vue-router

简介

作用