vue-router源码解析（一）

系列文章目录

1、vue-router源码解析（一）

---

---

前言

vue-router是Vue.js 官方的路由管理器。

---

一、vue-router的常用方法

// 1、引入vue-router
import Router from 'vue-router'

// 2、通过全局方法 Vue.use() 使用插件
Vue.use(Router)

// 3、创建router对象
const createRouter = () => {
    
    
  new Router({
    
    
    mode: 'history', // 需要配置vue.config.js publicPath
    base: process.env.VUE_APP_BASE_URL,
    routes    // 路由列表
  })
}
const router = createRouter()

// 4、挂载router
new Vue({
    
    
  el: '#app',
  router,
  render: h => h(App)
})


// 5、项目中使用router
<div id="app">
    <router-view />
</div>

二、源码src目录

版本：3.4.9

├── components  
│   ├── link.js      // <router-link/>组件，用于路由跳转
│   └── view.js     // <router-view/>组件，用于输出路由对应组件内容
├── create-matcher.js   //  路由匹配
├── create-route-map.js  //  路由匹配
├── history          // 路由模式相关
│   ├── abstract.js  // 非浏览器环境下的，抽象路由模式
│   ├── base.js      // 定义History基类
│   ├── hash.js      // hash模式，#
│   └── html5.js     // html5 history模式
├── index.js    // 入口文件
├── install.js  // vue-router作为vue的一个插件，符合vue插接开发规范，在install.js中定义了install等方法。
└── util        // 工具类和函数
    ├── async.js
    ├── dom.js
    ├── errors.js 
    ├── location.js
    ├── misc.js
    ├── params.js
    ├── path.js
    ├── push-state.js
    ├── query.js
    ├── resolve-components.js
    ├── route.js
    ├── scroll.js
    ├── state-key.js
    └── warn.js

三、源码思维导图

---

总结

下一篇继续解析