Generally, the steps for using vue-Router are as follows:

1. Introduce router plugin (router.js)

import VueRouter from 'vue-router'
Copy the code

2. Register the plugin (router.js)

The vue.use () method actually executes an install method internally, as explained below.

Vue.use(VueRouter)
Copy the code

3, Implement router instance (router.js)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: About
    }
]
const router = new VueRouter({
    routes
})
Copy the code

4. Add the instance to the component (main.js)

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

What is the role of routing?

The role of routing in a single-page application is:

  1. Changing the URL address causes the plane to jump.
  2. The view content corresponding to the URL is displayed, but the page is not refreshed.

The implementation process

  1. Demand analysis:
    1. The URL changes, but the page is not refreshed
      • Use the hash route hash #/about
      • Use the History API/About provided with H5
    2. Display the corresponding content according to the URL
      • Implement router-view(which is a placeholder that contains the view’s contents)
      • Implement data responsiveness
  2. Code implementation: index.js
import Vue from "vue"; import VueRouter from "./hvue-router"; import Home from ".. /views/Home.vue"; import About from ".. /views/About.vue"; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] const router = new VueRouter({ routes }) export default router;Copy the code

hvue-router.js

let Vue; class VueRouter { constructor(options) { this.$options = options; / / specify a response to the current object properties, purpose is path changes, the data also follow changes in Vue. Util. DefineReactive (this, "current", the window. The location. The hash. Slice (1)) / / path change monitoring, The current also change the window. The addEventListener (" hashchange ", () = > {. This current = window. The location. The hash. Slice (1); })}} VueRouter. Install = function (_Vue) { Mixin ({beforeCreate() {// When the router instance and Vue instance are all created, Prototype.$router = this.$options. Router; $router = this. } } }) Vue.component("router-link", { props: { to: { type: String, required: true } }, render(h) { return h( "a", { attrs: { href: "#" + this.to } }, this.$slots.default ); }}); // h is when the render function is called, Vdom Vue.component("router-view", {render(h) {let component = null; const routes = this.$router.$options.routes; const route = routes.find((route) => route.path === this.$router.current); if (route) { component = route.component; } return h(component); }}); } export default VueRouter;Copy the code

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './hvue-router'
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')
Copy the code

app.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Copy the code

Operation effect: