VUE - 如何写一个简易版 vue-router 插件

在vue2中 vue-router 通过插件的形式进行工作，回顾下具体操作步骤如下：

在router文件中

// 在router文件中引入 
import Router from 'vue-router'
// 使用Router
Vue.use(Router)
    
let routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/test',
    name: 'test',
    component: test
  }
];
// 导出Router对象
export default new Router({
  routes: routes,
  mode: 'hash',
})


在main.js中使用router对象
import router from './router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

经过以上步骤设置就能正常使用router了

那么如何实现一个简单的hash模式的vue-router插件呢？

• 能够在项目初始化的时候进行组件注册
• 能够支持 router-link 和 router-view
• 能够在template使用 $router 对象
• ····

1、新建 my-router 文件夹 新建index.js；

2、把router.js文件导入vue-router替换为自己的创建的my-router；

import Router from 'vue-router'  
替换成  
import Router from './../my-router/index'

3、实现自己的my-router

let Vue;
// 创建Router对象
class Router {
    constructor(options){
        	// 把options 绑定在Vue实例上
    	this.$options = options;
     	// 初始化获取hash路由数据
     	let initial = window.location.hash.slice(1) || '/';
      	// 设置current为响应式
    	Vue.util.defineReactive(this,'current',initial);
     	// 监听hash变化 改变current
       	window.onhashchange = () =>{
        		this.current = window.location.hash.slice(1)                  	   
       	}
    }
}
// 在mian.js 中的 Vue.use()其实调用的就是绑定的插件的install 方法
Router.install = function(_Vue){
    // 保存vue在Router对象中
    Vue = _Vue;
    // 使用mixin将调用时机延迟至数据渲染
    Vue.mixin({
            beforeCreate(){
                // 此处是为了在页面中可以正常使用$router对象
                if(this.$options.router){
                    this.prototype.$router = this.$options.router                 
                }            
            }
    })
    // 实现router-link功能(目前只考虑hash模式)
    Vue.component('router-link',{
           props:{
               // <router-link to='test'> testComp </router-link>
               // 获取router-link 上传递的属性
               to:{
                 	type:String                 
               }           
           },
           render(h){
               return h('a',{
                   attrs:{
                       href:'#'+this.to                   
                   },this.$slots.default            
               })           
           } 
    })
    
    Vue.component('router-view',{
        render(h){
           let router = this.$router.$options.routes.find(item => item.path === this.$options.current)
           let component = router ? router.component :null;
           return  h(component);       
        }
    })
}
export default Router

试了试···

还行···