Hand-written vUE – Router

Wechat official account: [Dafront-end Post] follow Dafront-end Post. Questions or suggestions, welcome to leave messages on the public account.

This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

The Vue Router is the official route manager of Vue. It is deeply integrated with vue.js, making building a single page application a breeze.

Using the vue – the router

Vue The Vue project created by cli is installed with Vue add Router

Core steps:

• Step 1: Create router-js, using the Vue-router plug-in

import Router from 'vue-router'
Vue.use(Router)
Copy the code

• Step 2: Create a Router instance

export default new Router({... })Copy the code

• Step 3: Add the instance to the root component in main.js

import router from './router'
new Vue({
  router,
}).$mount('#app')
Copy the code

• Step 4: Add a route view to app.vue

<router-view></router-view>
Copy the code

• navigation

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
Copy the code

or

this.$router.push('/')
this.$router.push('/about')
Copy the code

Handwritten vue – the router

Implement a plug-in: create the VueRouter class and install method

Let’s start our handwriting process by creating a simple vue-CLI project

Create my – vue – router. Js

}} let Vue class VueRouter {constructor(options) {this.$options = options}} $router vuerout.install = function(_Vue) {Vue = _Vue; $router vuerout.install = function(_Vue) {Vue = _Vue; If (this.$options.router) {ue.prototype.$router = this.$options.router // mount $router}}}) Vue.component('router-link', Link) Vue.component('router-view', View) } export default VueRouterCopy the code

Create my – the router – link. Js

export default {
  props: {
    to: String,
    required: true
  },
  render(h) {
    //  <a href={'#'+this.to}>{this.$slots.default}</a>
    return h('a', {
      attrs: {
        href: '#' + this.to
      }
    },[
      this.$slots.default
    ])
  }
}
Copy the code

Create my router – the js

Export default {render(h) {return h(null)}}Copy the code

Monitoring URL changes

Define a responsive property, current, that listens for hashonChange events

import Link from './my-router-link.js' import View from './my-router-view.js' let Vue class VueRouter { Constructor (options) {this $options = options / / save option const initial = window. The location. The hash. Slice (1) | | '/' Vue.util.definereactive (this, 'current', initial) // Listen for hashChange event window.addeventListener (' hashChange ', This.onhashchange.bind (this)) window.addeventListener ('load', this.onHashchange.bind (this)) Create a routing table in advance. $options.routes. ForEach (route => {this.routemap [route.path] = route})} OnHashChange () {. This current = window. The location. The hash. Slice (1)}} / / install method, $router vuerout.install = function(_Vue) {Vue = _Vue; $router vuerout.install = function(_Vue) {Vue = _Vue; If (this.$options.router) {ue.prototype.$router = this.$options.router // mount $router}}}) Vue.component('router-link', Link) Vue.component('router-view', View) } export default VueRouterCopy the code

Dynamically obtain the corresponding component

// my-router-view.js export default {render(h) {// let component = null // const route = this.$router.$options.routes.find(route => route.path === this.$router.current) // if(route) { // component = route.component // } const {routeMap, current} = this.$router const component = routeMap[current] ? routeMap[current].component : null return h(component) } }Copy the code

Change the router reference in router/index.js

// import VueRouter from 'vue-router' import VueRouter from '.. /myRouter/my-vue-router'Copy the code

Start the project and see what happens

【 Share, like, watch 】 three consecutive, let more people join us ~~