一看就懂的vue-router简版源码

1.Vue Router是什么？

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

2.Vue Router的使用方式

安装: vue add router

核心步骤：

• 步骤一：使用vue-router插件

 import Router from 'vue-router' 
 Vue.use(Router)

• 步骤二：创建Router实例

 export default new Router({
   
 	routes: [{
   ...}]
 })

• 步骤三:在根组件上添加该实例

import router from './router'
new Vue({
   
	router,
}).$mount('#app')

• 步骤四：添加路由视图

<router-view/>

• 导航

<router-link to="/">helloWorld</router-link>
<router-link to="/source">源码</router-link>

3. Vue Router源码实现

3.1 ⭐️ 需求分析

根据上面的使用方式

Vue.use(Router) ： 作为一个插件存在
export default new Router({…}) : vueRouter是一个类

vueRouter主要做的事情就是：监听路由的变化，当路由变化时，响应式的替换router-view中的视图内容。

所以我们自己写的这个简版的vue-router就需要满足以下需求：

• 作为一个插件存在: 实现VueRouter类和install方法
• 实现两个全局组件: router-view用于显示匹配组件内容，router-link用于跳转
• 监控url变化: 监听hashchange或popstate事件
• 响应最新url: 创建一个响应式的属性current，当它改变时获取对应组件并显示

3.2 🌷 准备知识：

• 插件