声明式导航传参
1 动态路由传参
-
路由规则path -> /article/:aid
-
导航链接 <router-link to="/article/1">查看第一篇文章</router-link>
-
组件获取参数: this.$route.params.aid
2 查询参数传参数
-
/路径?参数1=值&参数2=值
-
路由规则path -> /路径
-
导航链接 <router-link to="/article?id=1">查看第一篇文章</router-link>
-
组件获取 this.$route.query.id
编程式导航传参
1 动态路由传参
this.$router.push('/article/2')
- 组件获取参数: this.$route.params.id
2 查询参数传参数
this.$router.push('/article?id=2')
或写完整写法 this.$router.push({path: '路径', query: {参数1:值,参数2:值,...}})
路由规则path -> /路径
组件获取 this.$route.query.id
特殊符号含义:
-
问号
?
用于在路径后面引入查询字符串,表示参数的开始。 -
和符号
&
用于分隔不同的参数,表示参数的连接。
如果要传递三个值,可以按照以下格式进行传递:
this.$router.push('/article?id=2&name=zs&age=25');