1. Vue-router: Vue Router is the official route manager of vue. js. Its deep integration with vue.js core makes building single-page applications a breeze. 2. Installation:

vue add routerh
Copy the code

Core steps:

Use the vue-router plugin, router.js

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

Create Router instance, router.js

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

Add the instance, main.js, to the root component

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

Add routing view, app.vue

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

navigation

<router-link to="/">Home</router-link> <router-link to="/about">About</router-link>

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

3, source code implementation ideas:

In a single-page application, when the URL changes, it cannot be refreshed and the corresponding view content is displayed

4. Application Scenarios:

Spa page cannot refresh: hash #/about; History api /about

Router-view is displayed based on the URL. Data responsiveness: The current variable holds the URL address and dynamically re-executes render once it changes

5. Implement a plug-in that satisfies the following requirements:

Implement VueRouter class

Handling routing options

Monitor URL changes and act accordingly

Implementing the install method

Registered $router

Two global components

6. Key points:

Create the VueRouter class and install method

let Vue; class VueRouter { constructor(options) { this.$options = options; } }VueRouter.install = function(_Vue) {Vue = _Vue; Vue. Mixin ({beforeCreate() {// Only the root component has the router option if (this.$options.router) {// vm.$router vue.prototype this.$options.router; }}}); Vue.component('router-link', Link) Vue.component('router-view', View) }; export default VueRouter;Copy the code

To create the router – the link

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

To create the router – the view

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

Monitoring URL Changes

class VueRouter {
constructor(options) {const initial = window.location.hash.slice(1) || '/'
Vue.util.defineReactive(this, 'current', initial)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 obtain corresponding components

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 return h(component); }}Copy the code

Process the routing table in advance

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