Article directory
foreword
本文利用一个简易网易云导航小案例，带你了解路由导航如何传递参数！
Routing parameter passing methods are roughly divided into two categories, namely, declarative navigation parameter passing and programmatic navigation parameter passing.
The following two types of parameter passing methods are introduced in detail
1. Declarative navigation parameter passing
There are two ways
1. Query String
The value of the to attribute on the router-link is passed, the syntax format is: to="/path? parameter name=value"
<router-link to="/find?name=杨帆&age=21">发现音乐</router-link>
To receive parameters, you only need to write $route.query.parameter name in the component you want to jump to to receive the passed value
find component code
<template>
<div>
find组件 这是声明式导航通过查询字符串方式传递过来的参数 <br>
{
{
$route.query.name}}{
{
$route.query.age }} <br>
</div>
</template>
<script>
export default {
}
</script>
<style scoped></style>
In the case, it is necessary to jump to the find component and pass two parameter values name and age. Correspondingly, in the find component, two parameters can be received through $route.query.parameter name
find component code
<template>
<div>
find组件 这是声明式导航通过查询字符串方式传递过来的参数 <br>
{
{
$route.query.name}}{
{
$route.query.age }} <br>
</div>
</template>
<script>
export default {
}
</script>
<style scoped></style>
2. Dynamic routing parameters
The syntax format is to="/path/value", but the routing object needs to be configured in advance
<router-link to="/my/杨帆/21">我的音乐</router-link>
Configure the routing object path: "/part/:name", the path with: represents the parameter value to be received
const routes = [
{
// 匹配的路径
path: '/',
// 重定向到find组件
redirect: '/find'
},
{
path: '/find',
name: 'find',
component: find
},
//这一条是在配置路由 准备接收 两个参数 name 和 age
{
path: '/my/:name/:age',
name: 'my',
component: my
},
After configuration, you will start to receive parameters. Use $route.params.parameter name my component code on the page to be redirected
<template>
<div>
my组件 这是声明式导航通过动态路径参数方式传递过来的参数 <br>
{
{
$route.params.name }}{
{
$route.params.age }}
</div>
</template>
<script>
export default {
}
</script>
<style></style>
In the case, you need to jump to the my component and pass two parameter values name and age. After configuring the route, you can receive two parameters in the my component through $route.params.parameter name
3. Comparison between the two
From the result graph, the second dynamic path method is more concise and clean on the path
http://localhost:8081/#/find?name=Yang Fan&age=21 and http://localhost:8081/#/my/Yang Fan/21 From the perspective of the parameter transfer process, the second dynamic path method needs to configure one more routing
object
2. Programmatic navigation parameter passing
Programmatic navigation uses the name or path
of the component to jump. If you use name to jump, you can use query or params to pass parameters.
But if you use path to jump, you can only use query to pass parameters. The reason is that path will automatically ignore the parameters of params. So the
next two combinations are name + params and path + query.
1.path + query
<a @click.prevent="goFriend('/part', 'part')">朋友</a>
goFriend (path, name) {
this.$router.push({
path: path,
query: {
name: '杨帆',
age: '21'
}
})
}
Receive parameters through $route.query.name in the part component
<template>
<div>
part组件 这是编程式导航通过 path + query 方式传递过来的参数 <br>
{
{
$route.query.name }}{
{
$route.query.age }}
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
If you want to jump to the part component through programmatic navigation, use the combination of path + query to pass, and use $route.query.name to receive in the part component
2.name + params
<a @click.prevent="goShop('/shop', 'shop')">商城</a>
goShop (path, name) {
this.$router.push({
name: name,
params: {
name: '杨帆',
age: '21'
}
})
}
Receive parameters through $route.params.name in the shop component
<template>
<div>
shop组件 这是编程式导航通过 path + query 方式传递过来的参数 <br>
{
{
$route.params.name }}{
{
$route.params.age }}
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
If you want to jump to the shop component through programmatic navigation, use the combination of name + params to pass parameters, and use $route.params.name to receive in the shop component
3. The difference between the two
From the result graph, it is found that when name + params is passing parameters, the passed parameters will not be displayed on the path , which is very concealed,
but sometimes it is not a bad thing to display parameters on the path. When the page is refreshed, the parameters with parameters on the path will not be invalidated. If the parameters are not on the path, the parameters will be invalidated. For example, name + params parameters will disappear after refreshing the
page
Summarize
The two navigation methods correspond to the two parameter passing methods
It is not easy to create, like, follow and support the author!