手写简版的Vue-router

原版Vue-router的使用步骤

1. 先在router/index.js引入

//router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeComponent from "../components/home.vue"
import AboultComponent from "../components/about.vue"
//第一步
Vue.use(VueRouter)

const routes=[
	{
    
    
		path:'/',
		name:"Home",
		component:HomeComponent
	},
	{
    
    
		path:'/aboult',
		name:"Aboult",
		component:AboultComponent
	}
]
//实例化router
const router = new VueRouter({
    
    
	routes
})
//导出
export default router;

2. 挂载到Vue实例上

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from "./router/index.js"

Vue.config.productionTip = false
//挂载到Vue
new Vue({
    
    
  render: h => h(App),
  router
}).$mount('#app')

3. 在页面中使用

//App.vue
<template>
  <div id="app">
    <router-link to="/">Home</router-link>|<router-link to="/aboult">Aboult</router-link>
	<router-view></router-view>
  </div>
</template>

<script>

由上，要实现个vue-router，首先要实现router-link和router-view两个组件

1. 实现插件安装
   插件安装要实现install方法
2. 全局注册组件router-link和router-view
   使用Vue.component注册
3. 实现路由变化更新页面
   通过监听当前路由的变化，和设置的路由映射表对比，筛选出对应的页面组件，渲染出来
   代码如下

//hvue-router
let Vue;
class VueRouter {
    
    
	constructor(options) {
    
    
	    this.$options=options
		// 定义响应式数据current，保存当前的路由hash值
		Vue.util.defineReactive(this,'current',window.location.hash.substring(1)||'/')
		// 监听hash变化
		window.addEventListener('hashchange',()=>{
    
    
			this.current=window.location.hash.substring(1)
		})
	}

}
	//1、挂载$router,
	// 插件要实现install方法，此方法在Vue.use()时候调用
	VueRouter.install = function(_vue) {
    
    
		Vue = _vue;

		// 挂载$router,要拿到router的实例，但在Vue.use(),执行时候router实例还没有初始化，所以此处使用全局混入
		Vue.mixin({
    
    
			beforeCreate() {
    
    
				//只有根实例才有this.$options.router  new Vue({render: h => h(App),router}).$mount('#app')
				if (this.$options.router) {
    
    
					Vue.prototype.$router = this.$options.router
				}
			}
		})


	//2、全局注册router-link router-view两个组件
	Vue.component('router-link', {
    
    
		props:{
    
    
			to:{
    
    
				type:String,
				required:true
			}
		},
		render(h){
    
    
			return h('a',{
    
    attrs:{
    
    href:'#'+this.to}},this.$slots.default)
		}
	})
	Vue.component('router-view', {
    
    
		render(h){
    
    
			let component=null
			//this.$router为当前Rouetr的实例
			// 根据路由映射表（ this.$router.$options.routes）和当前路由筛选出对应的组件
			const route = this.$router.$options.routes.find((route)=>route.path==this.$router.current)
			if(route){
    
    
				component=route.component;
			}
			return h(component)
		}
	})
	}
export default VueRouter

源码