How to use vue-Router in VUE?

1.Vue use plug-in, that is, call Vue use method;

// router.js 
Vue.use(Router);
Copy the code

2. Instantiate the router and configure the router configuration object, including routes.

// router.js 
export default new Router({
    mode:"hash".routes:[
        {
            path:"/hello".component:HelloWorld
        },
        {
            path:"/".component:VuexTest
        },
        {
            path:"/form".component:Form
        }
    ]
})
Copy the code

3. Configure the Router instance on the VUE instance.

// main.js
import router from "./config/router";
new Vue({
  router,
  render: h= > h(App),
}).$mount('#app')
Copy the code

Use 4.

<template>
  <div id="app">
    <router-link to="/">home</router-link>|
    <router-link to="/form">form</router-link>|
    <router-link to="/hello">HelloWorld</router-link>
    <router-view></router-view>
  </div>
</template>
Copy the code

Effect of 5.

Click Home, Form, helloWorld to switch the routing page.

What does vue-Router do internally during the above steps?

We need to understand that router-link and router-view are two Vue global components, which must be globally defined in vue-Router. They are used to redirect the route and display the corresponding component content of the route respectively.

When we click router-link, the route changes. Vue-router must be monitoring the route changes internally, finding the matching components according to the routing rules, and rendering them in router-View.

So route switching ends up being a presentation of different components of the page without actually refreshing the page.

The following is the implementation principle of vue-Router core:

  • 1. Implement a static install method, as plugins must have this method called by vue.use ();
  • 2. Monitor route changes.
  • 3. The configured route is parsed. That is, the routes of the router are parsed.
  • 4. Implement two global components router-link and router-view; (Final landing location)

Core code implementation simple version:

let Vue; class KVueRouter { constructor(options){ this.$options=options; this.$routerMap={}; //{"/":{component:... } this.app = new Vue({data:{current:"/"}}); } // initialize init(){// listen for the event this.bindevent (); // parse the route this.createroutemap (); // Declare the componentthis.initComponent (); } bindEvent(){ window.addEventListener('hashchange',this.onHashchange.bind(this)); } onHashchange(){ this.app.current = window.location.hash.slice(1) || "/"; } createRouteMap(){ this.$options.routes.forEach(route=>{ this.$routerMap[route.path]=route; }) } initComponent(){ Vue.component('router-link',{ props:{ to:String, }, render(h){ return h('a',{attrs:{href:'#'+this.to}},[this.$slots.default]) } }); Vue.component('router-view',{ render:(h)=>{ const Component = this.$routerMap[this.app.current].component; return h(Component) } }); Install = function(_vue){vue = _vue; vue = _vue; Mixin ({beforeCreate(){// Get the router example, Prototype.$router=this.$options. Router; this.$options.router.init(); } } }) } export default KVueRouter;Copy the code

Read as follows:

  • Vue. Use (Router) will call the Router install method and pass in the Vue class, mixing it with the beforeCreate method. $router () {this.$router. Push () {this. Call the router instance init method;

  • Init does all three things: listen for routes, parse routes (route mapping matches), define components;

  • Note that the variable this.app.current, which stores the current route, is not a normal variable, but borrowed from Vue’s responsive definition. Therefore, when the route changes, only the value of this.app.current needs to be assigned. When it changes, all references change, and the resulting components to be displayed change in response.

Why are attributes under vue instance Data reactive? How is it done? Please pay attention to the vUE responsive principle blog post!