Vue Router is the official route manager of vue.js. It’s the core deep integration of vue.js that makes building single-page applications a breeze.

use

Installation: vue add Router

Core steps:

  • Step 1: Use the vue-router plug-in, router.js
   	import Router from 'vue-router'
   	vue.use(Router)
Copy the code
  • Step 2: Create a Router instance, router.js
export default new Router({... })Copy the code
  • Step 3: Add the instance, main.js, to the root component
	import router from './router'
    new Vue({
    	router,
    }).$mount("#app");
Copy the code
  • Step 4: Add a routing view
	<router-view></router-view>
Copy the code
  • navigation
	<router-link></router-link>
Copy the code

The source code to achieve

** Exists as a plug-in: implement the VueRouter class and install method **

** Implements two global components: router-view for displaying matched components and router-link for jumping to **

** Monitor URL changes: listen for hashchange or popState events **

** Responds to the latest URL: Create a responsive property current that gets the corresponding component when it changes and displays **

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

Create my – router. Js

Let vue // reference class VueRouter {constructor(options) {this.options = options}} $router VueRouter. Install = function(_Vue) {$router VueRouter = _Vue; // Task 1: If (this.$options.router) {// vm.$router vue.prototype.$router =  this.$options.router } } }); // Task 2: Implement two global components router-link and router-view Vue.component('router-link', link); Vue.component('router-view',View) } export default VueRouter;Copy the code

Why blend in? The main reason is that the use code comes first and the Router instance is created later, which is needed by the install logic

Example Create a router-view and router-link

Create my – link. Js

	export default {
    	props: {
        	to: String,
            required: true
        },
        render(h) {
        	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

Listen for URL changes

Define a reactive current property that listens for the Hashchange event

Class VueRouter {constructor(options) {// current should be the response vue.util. DefineReactive (this, 'current', '/') / / define the attributes reactive current const initial = window. The location. The hash. Slice (1) | | '/' Vue.util.definereactive (this,'current',initial) // Listen for the hashchange event window.addEventListener('hashchange',this.onHashChange.bind(this)) window.addEventListener('load', this.onHashChange.bind(this)) } onHashChange() { this.current = window.location.hash.slice(1) } }Copy the code

Dynamically get the corresponding component, my-router-view.js

Export default {render(h) {// let component = null; this.$router.$options.routes.forEach(route=> { if(route.path === this.$router.current) { component = route.component } }); return h(component) } }Copy the code

Process the routing table in advance

Process the routing table in advance to avoid repeating it every time

RouteMap = {} this.routemap = {} this.$options.routemap. this.routeMap[route.path] = route }) } }Copy the code

Use, krouter – view. Js

	export default {
    	render(h) {
        	const { routeMap, current } = this.$router
            const component = routeMap[current] ? routeMap[current].component : null
            return h(component)
        }
    }
Copy the code