1. Router-link routing navigation method transfer parameters
Parent component: <router-link to="/Path to be redirected/Parameters passed"></router-link>
Subcomponents:this.$Accept parameters passed by the parent component
For example:
Routing configuration:
bashbash{path:'/father/son/:num',name:A,component:A}```
Display in the address bar:
http://localhost:8080/#/father/son/44
Calling method:
<router-link to="/father/son/incoming parameters">Father Components<router-link> Subcomponents pass this.$ Accept parameters
2. Call $ to implement routing parameters
Parent component: triggered through practice, jump code
<button @click="clickHand(123)">pushTransfer the ginseng</button>
methods: {
clickHand(id) {
this.$({
path: `/d/${id}`
})
}
}
Routing configuration
{path: '/d/:id', name: D, component: D}
The address bar shows:
http://localhost:8080/d/123
How the child component accepts parameters
mounted () {
= this.$
}
3. Match the route through the routing attribute name, and then pass the parameters according to params
Parent component:
<button @click="ClickByName()">paramsTransfer the ginseng</button>
ClickByName() {
this.$({
name: 'B',
params: {
context: 'Wu can be both Wu and Wu can be both Wu and Wu can'
}
})
}
Routing configuration: The path does not need to be added to the passed parameters, but the name must be the same as the name in the parent component.
{path: '/b', name: 'B', component: B}
Display in the address bar: The address bar will not have incoming parameters, and the parameters will be lost after refreshing the page again.
http://localhost:8080/#/b
How subcomponents receive parameters:
<template>
<div >
This is page B!
<p>Pass in parameters：{{this.$}}</p>
</div>
</template>
4. Pass parameters through query
Parent component:
<button @click="clickQuery()">queryTransfer the ginseng</button>
clickQuery() {
this.$({
path: '/c',
query: {
context: 'Wu and Wu and Yu'
}
})
}Routing configuration: No modification is required
{path: '/c', name: 'C', component: C}
Display in the address bar (Chinese transcoding format):
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6
Subcomponent acceptance method:
<template>
<div >
This is page C!
<p>This is the data passed in by the parent component: {{this.$}}</p>
</div>
</template>
The above methods of transferring parameters are often used in work, and it is completed~
Summarize
This is the end of this article about the four ways of vue-router transmission. For more related content on vue-router transmission, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!