First, let's clarify some basic concepts of routing:
1) route is a route, that is, a mapping, that is, A button → A content, which is stored in the form of an array
2) toutes:[] is a group of routes, which contains several routes, namely route[{A button→A content}, {B button→B content}]
3) The router is the management mechanism responsible for processing and finding routing requests
const router = new VueRouter（{
routes
}）
The steps to configure routing are as follows:
1. Install vue-router, enter npm install vue-router in npm, after the installation is successful, the router folder will appear in the same level directory of main.js
2. Configure routing information in index.js under the router folder:
import Vue from 'vue' import VueRouter from 'vue-router'
import xx from 'xxx'
Vue.use(Router)
export default new Router({
routes:[
{
path:'/', //Required, it means a route to jump to, / means the path of the home page.
name:'index', //optional, it is the name of the component, it is recommended to fill in for the convenience of distinction
component:HelloFromVux //Required, specifies the component that needs to be jumped
}，{
…
}
]
})
3. Configure a rendering route exit for vue-router in the component,
<router-link to='The path where the target component is located (no file name is required)'>
<div></div>//The display style of the component on this page is written here, which is equivalent to the a tag style
</router-link>
<router-view></router>//Give the route a rendered exit