1. Define the VUE route object

class VueRouter {    
    constructor(options){
        this.$options=options    
}}
Copy the code

Install (); install ();

Vuerouter. install=function(_Vue){Vue=_Vue If (this.$options.router){if(this.$options.router){if(this.$options.router){if(this.$options.router){if(this.$options.router){if(this $router = this.$options.router // route initialization this.$options.router. Init ()}},}); }Copy the code

3. Implement init method

Class VueRouter {constructor(options){this.$options=options} init(){} class VueRouter {constructor(options){this.$options=options} init(){ The onHashChange event requires access to the current instance window.addeventListener (' hashChange ', this.onHashChange.bind(this)) window.addEventListener('load', This.onhashchange.bind (this)) // render the rouer-view, router-link component this.initComponent()}}Copy the code

3.1. InitComponent method

This is a very important step. The whole routing principle is that the page view is rerendered when the hash changes. Therefore, the responsive data attribute of vue is needed in this case. Initialize a responsive data with vUE

class VueRouter { constructor(options) { this.$options = options this.routeMap = {} this.app = new Vue({ data() { return  { currentHash: '/', }; }, }) }} initComponent() { Vue.component('router-link', { props: { to: { type: String } }, render(h) { return h('a', { attrs: { href: '#' + this. To}}, this.$slots.default)}}) // Create a Vue.component('router-view', {render: Let comp = this.$options.routes. Find (item => item.path ==) this.app.currentHash).component return h(comp) } }) }Copy the code

Implement the onHashChange method

OnHashChange () {/ / hash change, need to render view / / get the current routing hash. This app. CurrentHash = window. The location. The hash. Slice (1) | | '/'}Copy the code

The complete code

let Vueclass VueRouter { constructor(options) { this.$options = options this.routeMap = {} this.app = new Vue({ data() {  return { currentHash: '/', }; },})} init() {// bind the browser hashChange and load events. The onHashChange event requires access to the current instance window.addeventListener (' hashChange ', this.onHashChange.bind(this)) window.addEventListener('load', This.onhashchange.bind (this)) // render the rouer-view, router-link component this.initComponent()} onHashChange() {// Hash change, Need to render the view / / get the current routing hash. This app. CurrentHash = window. The location. The hash. Slice (1) | | '/'} initComponent () { Vue.component('router-link', { props: { to: { type: String } }, render(h) { return h('a', { attrs: { href: '#' + this. To}}, this.$slots.default)}}) // Create a Vue.component('router-view', {render: Let comp = this.$options.routes. Find (item => item.path ==) This.app.currenthash).component return h(comp)}})}} // Turn VueRouter into a plugin // perform a mashup task // mount $router // on the root component's prototype Vuerouter. install = function (_Vue) {//install will pass in the vue object, Vue = _Vue vue. Mixin ({// mount $router on vue prototype when the instance is initialized // mount beforeCreate() on the root component; If (this.$options.router) {// If (this.$options.router) {// If (this.$options.router) {// if (this.$options.router) {// if (this.$options.router) {// if (this.$options.router) {// if (this.$options.router) {// if (this.$options.router) = this.$options.router // Route initialization this.$options.router. Init ()}},}); } export default VueRouterCopy the code