Four ways to pass parameters in vue routing
1. Router-link routing navigation method to pass parameters
Parent Component: <router-link to="/跳转到的路径/传入的参数"></router-link>
Child Component:this.$route.params.content接受父组件传递过来的参数
For example:
routing configuration:
bashbash{
path:'/father/son/:num',name:A,component:A}```
Display in the address bar:
http://localhost:8080/#/father/son/44
Call method:
<router-link to="/father/son/传入的参数">父亲组件<router-link>
子组件通过 this.$route.params.num 接受参数
2. Call $router.push to implement routing parameters
Parent component: trigger through practice, jump code
<button @click="clickHand(123)">push传参</button>
methods: {
clickHand(id) {
this.$router.push({
path: `/d/${
id}`
})
}
}
routing configuration
{
path: '/d/:id', name: D, component: D}
The address bar shows:
http://localhost:8080/d/123
How the subcomponent accepts parameters
mounted () {
this.id = this.$route.params.id
}
3. Match the route through the route attribute name, and then pass the parameters according to params
parent component:
<button @click="ClickByName()">params传参</button>
ClickByName() {
this.$router.push({
name: 'B',
params: {
context: '吴又可吴又可吴又可'
}
})
}
Routing configuration: there is no need to add incoming parameters after the path, but the name must be consistent with the name in the parent component
{
path: '/b', name: 'B', component: B}
Display in the address bar: the address bar will not carry the incoming parameters, and the parameters will be lost after refreshing the page again
http://localhost:8080/#/b
The way subcomponents receive parameters:
<template>
<div id="b">
This is page B!
<p>传入参数：{
{
this.$route.params.context}}</p>
</div>
</template>
Fourth, pass parameters through query
parent component:
<button @click="clickQuery()">query传参</button>
clickQuery() {
this.$router.push({
path: '/c',
query: {
context: '吴又可吴又可'
}
})
}
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 accept method:
<template>
<div id="C">
This is page C!
<p>这是父组件传入的数据: {
{
this.$route.query.context}}</p>
</div>
</template>
The above methods of passing parameters are often used in work, it is over~ Welcome to like and collect