current position:Home>Use of Vue router

Use of Vue router

2022-04-29 07:15:03Can't find the carved Yang Guo

One 、 Know routing

1. What is routing

Send something from the original address to the destination address

2. Back end routing

The back-end processing URL And the relationship between pages

3. Front and back separation stage ( Front end rendering )

The backend is only responsible for providing data , Not responsible for the content of any stage
After the front end requests data , Pass the data through js The code is displayed in the web page
Front end rendering : Most of the content in the web page displayed in the browser , It's all written by the front end js The code executes the final rendered page in the browser

4. Single page rich stage (SPA)

The main feature is to add a layer of front-end routing on the basis of front-end separation
That is, the front end maintains a set of routing rules
The whole website has only one html page

Two 、vue-router Basic use

1. The method of changing the request path without refreshing the web page

1. change location.hash=‘aaa’
2. adopt history object history.pushState({},’’,‘home’), This method has stack pressing operation
history.replaceState({},’’,‘about’) You cannot return without saving
history.back=history.go(-1)
history.forward()=history.go(1)

2. Components to basic steps

1. Register plug-ins

VueRouter stay vue Is a plug-in ,vue When using plug-ins , Need to pass through Vue.use() Method to register
Vue.use(UveRouter)

2. Create routing objects

const router=new VueRouter({}) Among them option Is an array containing path and component correspondence

3. take routers Object to vue In the component

export default router
stay vue Just pass it in

Generally set as history Pattern

router-link label

to attribute : Set the jump path

tag attribute : Set the label after rendering

Will give the click tag router-link-active Of class

active-class You can modify router-link-active Your name is easy to use , Or in routing index Unified modification in , Use linkActiveClass:’…’

3、 ... and 、vue-router Nested Route

Four 、vue-router Parameter passing

5、 ... and 、vue-router Navigation guard

keep-alive

So that components are not destroyed often
Use... On the home page path Record the path when leaving

copyright notice
author[Can't find the carved Yang Guo],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204260554326570.html

Random recommended