Routing router: one-to-one correspondence between page jumps and url values
URL in routing: mainly refers to the hash value of URL
Pages in routing: mainly refer to components of vue (pages and boxes are both components in vue)
Vue is a progressive framework, a web page consists of many pages, how do I jump between pages?
-
In vue, the page jump is mainly realized
路由by -
For SPA single page development
Six steps to use routing:
Although the routing technology is not a technology in the vue framework, vue has perfected the use of vue, we can use it together with the vue framework to improve the user experience
The use steps of routing are fixed and can be divided into six major steps
You can also choose automatic configuration in vue. Of course, in order to choose to realize the functions we need, manual configuration is generally recommended.
Download the routing plugin and import it into the main.js file of the vue project
Run npm install vue-router@3 in the terminal (this is the version you choose to download)
Import command import VueRouter from 'vue-router'
Import Vue.use(VueRouter) This command is a global method for registering router-view and router-link
One: Import page components Import the subcomponents you need into the main.js file
import component name from 'path'
Two: Define/configure routing rules Routing rules A url corresponds to a page Secondary routing is also defined at this time
First-level routing: const =routes=[{path:'/hash value of subcomponent page', component: subcomponent name}]
Secondary routing: const =routes=[{path:'/hash value of subcomponent page',component:subcomponent name,children:[path:'/hash value of subcomponent page',component:subcomponent name}]
The second-level routing is to add the chilren object in the target first-level subcomponent, and then write it in the same way as the first-level routing
Three: Create a routing object Create a routing object
const router = new VueRouter[{routes}]
Four: Mount the route to the rendering file Mount the created route object into the entry file
new View({
router,
render: h=>h(App)
}).$mount('#app')
Five: Set the routing exit to the page Add the routing exit to the root component page
The routing exit is a box that takes up space. It mainly plays the role of taking up space. Generally, this box is not rendered in development.
<router-view></router-view> (both single and double labels are acceptable)
Six: Routing navigation to the root component page Setting routing navigation can make the page interaction effect better and the user experience better
<router-link to="/subcomponent name"></router-link>
This tag is routing navigation, which can be seen as the same usage as the <a> tag, where to is equal to href="#/subcomponent name" in the <a> tag
This is the six steps used by routing. You only need to modify some of the steps when adding it.
auto-configuration routing
In addition to manual configuration, routing can also be automatically configured, without the need for us to manually generate templates
The specific naming is not described too much, and the method of modifying the initial page after automatic configuration is attached (vue will have an advertising page)
I call it the Three Two One Amendment Act:
