Detailed explanation of the installation and use of Vue-Router

npm install --save vue-router

vue create project_name
#Vue will ask you which configuration to useDefault ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features 

#Please select Manually select features, Vue will ask you what configurations the current project needs. Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing   
#Please select Router, and then choose the following series of questions according to the actual situation.

// src/router/index.js

import Vue from 'vue' // Import Vue
import VueRouter from 'vue-router' // Import VueRouter

// Vue supports VueRouter
Vue.use(VueRouter)

let router = new VueRouter() // Initialize VueRouter

new Vue({  
  router // Configure the VueRouter instance object to the router option of the Vue instantiation configuration object}).$mount('#app')

// src/main.js

import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

to="/home" url="/home/user" non-strict match to="/home" url="/home/user/10086" non-strict match to="/home" url="/home" strict match to="/" url="/order" / is the root route of all routes, so they are non-strict matches

{
  path: string,
  component?: Component, // The route component displayed when the current route matches name?: string, // Named route redirect?: string | Location | Function, // Route redirect props?: boolean | Object | Function, // 
  alias?: string | Array<string>, // Route alias children?: Array<RouteConfig>, // Nested routes beforeEnter?: (to: Route, from: Route, next: Function) => void, // Route guard caseSensitive?: boolean, // Is the matching rule case sensitive? (Default value: false)
}

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home'
import Order from './views/Order'
import User from './views/User'

// Vue supports VueRouter
Vue.use(VueRouter)

let router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/order',
      component: Order
    },
    {
      path: '/user',
      component: User
    }
  ]
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app')       

// Navigate to the specified URL
<router-link to="/home">Home</router-link>
<router-link to="/order">Order</router-link>
<router-link to="/user">user</router-link>
/* Navigate to the specified location
Common properties of location object in vue router {
    path:'/', //Specify the path of the jump route hash:'#top' //Specify the hash value of the jump route name: 'Home', //Specify the name value of the named route for the jump params: {}, //Specify the params object passed by the jump route query: {} //Specify the query key-value pair passed by the jump route }
*/
<router-link :to="{path:'/user'}">user</router-link>
// When using location to redirect a page, the params attribute of the current location cannot be passed to the routing component <router-link :to="{path:'/user',hash:'#top',params:{id:1,name:'Xiao Ming'}}">user</router-link>
// Using name route navigation, you can pass params to any named route
<router-link :to="{name:'User',hash:'#top',params:{id:1,name:'Xiao Ming'}}">user</router-link>
// query supports name navigation and path navigation. It is not recommended to use query to pass object attributes <router-link :to="{name:'User',hash:'#top',query:{id:1,name:'Xiao Ming'}}">user</router-link>

// Use replacement to jump to the route <router-link class="tab-item" replace to="/user">user</router-link>

// If the current browser url is /order
// Clicking Gec will jump to /order/gec
<router-link to="gec" append>Gec</router-link>
// Click Gec1. Because the to of Gec1 is not a relative path, append will be invalid and the route will jump to /gec
<router-link to="/gec" append>Gec1</router-link>
// Clicking Gec2 without append will jump to /gec
<router-link to="gec">Gec2</router-link>

// Render router-link as a span element on the page <router-link tag="span" class="tab-item" to="/">Home</router-link>

// The class name of the current router-link is aaaa when it is not strictly matched
<router-link active-class="aaaa" to="/order">Order</router-link>

//Both double-clicking and clicking can trigger the current element's route jump <router-link :event="['dblclick','click']" to="/">Home page</router-link>

<transition name="fade">
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>