vue路由传参

声明式导航传参?

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');