Usage of Vue Router

 The main feature of SPA single page is that a layer of front-end routing is added on the basis of the separation of front-end and back-end. That is, the front end maintains a set of routing rules. The user clicks the routing link on the page, which causes the Hash value in the URL address bar to change. The front-end routing monitors the change of the Hash address, and the front-end routing renders the component corresponding to the current Hash address to the browser. Vue-router is the routing solution officially given by Vue. It can only be used in conjunction with the vue project, and can easily manage the switching of components in the SPA project. For VueRouter, routing is the decision-making process of selecting a component for rendering based on a request path.

Install vue-router: nmp i vue-router

Write configuration items

import VueRoute from "vue-router"

import A from "../components/A.vue"

import B from "../components/B.vue"

export default new VueRoute({

    routes:[

        {

            path:"/a",

            component:A

        },

        {

            path:"/b",

            component:B

        }

    ]

})

Introduce registration

import Vue from 'vue';

import App from './App.vue';

//

import VueRouter from "vue-router"

import router from "./router/index.js"

Vue.config.productionTip = false;

Vue.use(VueRouter)

const vm=new Vue({

  render: h => h(App),

  router,

}).$mount('#app');

Specify placements

 <router-link></router-link>

<router-view></router-view>