Vue-Router源码解析：如何实现路由跳转机制？

本文共计1727个文字，预计阅读时间需要7分钟。

深入解析Vue-Router源码分析，路由实现原理+使用Vue开发SPA应用，离不开vue-router。那么，vue和vue-router是如何协同运行的呢？以下从使用的角度，大白话帮大家一步步梳理下vue-router的实现流程。

深入Vue-Router源码分析路由实现原理

使用Vue开发SPA应用，离不开vue-router，那么vue和vue-router是如何协作运行的呢，下面从使用的角度，大白话帮大家一步步梳理下vue-router的整个实现流程。

到发文时使用的版本是：
- vue (v2.5.0)
- vue-router (v3.0.1)

一、vue-router 源码结构

github 地址：github.com/vuejs/vue-router

components下是两个组件<router-view> 和 <router-link>

history是路由方式的封装，提供三种方式

util下主要是各种功能类和功能函数

create-matcher和create-router-map是生成匹配表

index是VueRouter类，也整个插件的入口

Install 提供安装的方法

先整体展示下vue-router使用方式，请牢记一下几步哦。

import Vue from 'vue' import VueRouter from 'vue-router' //注册插件 如果是在浏览器环境运行的，可以不写该方法 Vue.use(VueRouter) // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 const User = { template: '<div>用户</div>' } const Role = { template: '<div>角色</div>' } // 2. 定义路由 // Array,每个路由应该映射一个组件。