1. <router-link> mode jump
1. Carry query parameters
<router-link to="/detail ?id=001&title=Message 001 "> Message 001</router-link>
<router-link :to="{
name: 'detail',
path: '/detail',
query: {
id: '001',
title: 'Message 001'
}
}"
Note: This method does not require dynamic routing configuration, just choose one of name and path in the form of to attribute object.
At this time, the browser address bar address is: http://localhost:8080/detail?id=001&title=message 001
The receiving parameters are:
$route.query.xxx
2. Carry params parameter
<router-link :to="`/detail/${id}/${title}`"> { { title }} </router-link>
<router-link :to="{
name: 'detail',
path: '/detail',params: {
id: '001',
title: 'Message 001'
}
}"
Note: This method needs to modify the routing configuration, and only name can be used to match the routing in the object form of to
{
name: 'detail',
path: '/detail/:id/:title'
component: Detail
}
At this time, the browser address bar address is: http://localhost:8080/detail/001/message 001
The receiving parameters are:
$route.params.xxx
3. Convert parameters to props attributes
We can use the props attribute when configuring the route to receive the parameters carried by params/query in the component with the props attribute, so that it can be used directly when used, and there is no need for $route.params.xxx/$route.query.xxx Form up
Configuration method:
{
name:'detail',
path:'/detail',
component: Detail,
/**
方式一，值为对象，对象中的key-value会以props的形式传递给Detail组件，
但是传递的值都是一样的，不推荐
props: {
id: '123',
title: '消息001',
},
**/
/**
方式二，值为布尔值，若布尔值为真，就会把该组件收到的所有params参数，以props的形式传式传递给Detail组件， 但之这种方式只适用于params参数
props: true,
**/
/**
方式三，值为函数，内置传参$route，可以使用结构赋值形式
**/
props({query}){
return {id: query.id, title: query.title}
},Also learned a form of structural re-structuring
props({ query: { id, title } }) {
return { id, title }
2. Programmatic jump routing
By writing code to make the routing jump, there are two jumping methods, one is push, the other is replace, they are all functions on $router (exist on the VueRouter prototype). At this time, the way to carry parameters is:
this.$router.push({
name: 'detail',
params: {
id: xxx,
title: xxx
},
/**
query: {
id: xxx,
title: xxx
}
**/
})
this.$router.replace({
name: 'detail',
params: {
id: xxx,
title: xxx
},
/**
query: {
id: xxx,
title: xxx
}
**/
}) Note: Regardless of the way to jump, if you want to receive different params in the label, you need to use /: placeholder in the routing configuration , otherwise you can only receive the parameters brought in when you open it for the first time.
Write at the end:
If you have any suggestions or comments, please comment. If anyone finds an error in the article, please point it out in the comment area~