What is routing? In network principle, routing refers to querying the routing table forwarding to another interface based on the IP address in the data packet of the previous interface. It determines an end-to-end network path.
In the web, the concept of routing is similar, and the request is assigned to a specified 'end' according to the URL. (That is, find a program or module that can handle this URL based on the URL)
Using a build project, you can form an application by combining components; when you introduce vue-router, what we need to deal with is to map components to routes and then use rendering where needed.
1. Basic routing
1. Create a vue project, execute the vue init webpack projectName command, and install vue-router by default. After the project is created, in the HTML section in the main component:
<template> <div > <router-view/> </div> </template>
In the above code, <router-view/> is the route exit, and the components matched by the route will be rendered here.
2. File router/:
import Vue from 'vue' // Import vue pluginimport Router from 'vue-router' // Import vue-routerimport HelloWorld from '@/components/HelloWorld' // Import HelloWorld components
(Router) // Introduce vue-routerexport default new Router({
routes: [
{
path: '/', // Match the root path of the route name: 'HelloWorld',
component: HelloWorld
}
]
})
The above code is relatively simple, and it is a general import and reference operation. What is the specific function of ()?
Personal understanding: (plugin, arguments) is to execute a plugin function, or execute the plugin install method for plugin registration (if plugin is a function, then execute; if it is a plugin, execute the plugin install method...); and pass the Vue object to the plugin or its install method as the first parameter; if there are multiple parameters, other parameters of use are used as other parameters of plugin or install. (The source code needs to be analyzed in detail, so I won’t explain too much here)
2. Dynamic routing
What is dynamic routing? Dynamic routing means that the router can automatically establish its own routing table and can make real-time adjustments according to changes in actual conditions.
1. In the vue project, if you use vue-router to perform routing mode without passing parameters, it is called static routing; if you can pass parameters, the corresponding number of routes is uncertain, and the route at this time is called dynamic routing. Dynamic routing starts with a colon (:), as follows:
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/RouterComponents/:id',
name: 'RouterComponents',
component: RouterComponents
}
]
})
2. There are two types of execution methods for routing jumping;
The first category: router-link mode, directly write parameters in the to attribute:
<router-link :to="{name:'RouterComponents',params:{id:110}}">Jump</router-link>
The second category: $() pattern, the code is as follows:
methods: {
changeFuc (val) {
this.$({
name: 'RouterComponents',
params: {id: val}
})
}
}
or:
methods: {
changeFuc (val) {
this.$({
path: `/RouterComponents/${val}`,
})
}
}
3. Nested routing
In the vue project, the interface is usually composed of multiple nested components; similarly, dynamic routing in the URL can also correspond to nested components according to a certain structure:
export default new Router({
routes: [
{
path: '/', // Root routing name: 'HelloWorld',
component: HelloWorld
}, {
path: '/RouterComponents/:id',
component: RouterComponents,
children: [
{
path: '', // Default routing name: 'ComponentA', // When RouterComponents is matched, it is displayed in <router-view> by default component: ComponentA
},
{
path: '/ComponentB',
name: 'ComponentB',
component: ComponentB
},
]
}
]
})
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.