vue-router原理分析与实践

今天大师兄跟大家简单聊聊Router的实现原理,以及我们如何去实现这样一个插件。

Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
关于Vue Router的使用就不做过多介绍了,大家可以前往Vue Router官网去学习哦~

vue-router插件的基本使用

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({routes:[]})
export default router
​
import router from './route'
new Vue({
    render: h => h(APP),
    router
})

从上述代码可以看出，router也是作为一个插件去使用的，所以在进行原理实践时候，我们开发的就是一个插件。

插件开发思路

• 定义一个Router类，用来进行所有的router操作。定义一个install方法，将router挂载到Vue的实例上去

• 注册全局组件router-link和router-view，router-link组件解析为一个a标签，router-view解析为一个div标签，内容为当前路由对应的component