背景

面试场景，面试官会问你知道vue-router原理吗

目标

1.知道vue-router的使用场景、使用方式
2.从源码层面上看

参考链接

官方文档地址：router.vuejs.org/

知乎：zhuanlan.zhihu.com/p/37730038

知乎： vue面试，谈下router拦截

vue中使用router全局守卫实现页面拦截

诞生背景

axios的诞生使得不刷新页面就能更新数据，路由的诞生做到了页面间跳转不刷新

前端路由两种方式

hash

就是#url，后面hash变化会触发hashchange事件，路由的改变不会向服务器发送请求

<script>
    window.addEventListener('hashchange', function () {
      console.log('----hashchange----')
    })
  </script>
复制代码

history模式

HTML5提出了另一种实现路由的方式，监听方法有pushstate、replacestate、popstate。实现原理和hash模式一样，不会向服务器发送请求，没有#符号变得美观

在new Router({mode: ‘history})中设置模式为history，使用这种模式依赖于后端配置，否则404

abstract模式 (vue-router 2.6源码中有)

使用

全局注册

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router) // 全局注册，<router-link>和<router-view>，$router，$route能够使用

复制代码

默认路由配置, 数组，每一个路由对象有属性:
name: 路由名

path:路径名字

component:

children

beforeEnter

afterEnter

beforeLeave

export default [
  {
    name: 'index',
    path: '/',
    component: () => import(/* webpackChunkName: "lazy-index" */ '@/views/index.vue')
  },
  {
    name: 'users',
    path: '/users',
    component: () => import(/* webpackChunkName: "lazy-users" */ '@/views/users.vue'),
    children: [
      {
        name: 'users-id',
        path: ':id',
        component: () => import(/* webpackChunkName: "lazy-users-id" */ '@/views/users/_id.vue')
      }
    ]
  }
]

复制代码

路由守卫

全局路由守卫

1.beforeEach (to from next)

2.afterEach (to from)

3.beforeResolve (to from next)

路由守卫

beforeEnter
afterEnter

3.afterLeave

组件路由守卫

1.beforeRouteEnter (to from next): 无法获取this，但next可以接收一个组件实例参数v,

2.beforeRouteUpdate (to from next): 可以获得this实例，路由变化钩子，监听路由变化，或者使用watch: $route(to, from)方式

3.beforeRouteLeave (to from next): 可以获取this实例

完整的路由解析流程

路由对象

route

路由属性对象，几个常用的属性：

name

path

fullPath

query

params

hash

matched

router

路由对象，常用的属性有，

mode， currentRoute即为$route

原型上有一些钩子函数和操作方法，比如

push

replace

forward

reslove

动态路由

动态路由中的参数会在route的params中

编程式导航

声明式< router-link :to=””> 编程式$router.push()

编程式

$router.push('home') // 字符串

$router.push({path: 'home'}) // 对象

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

复制代码