vue路由传参

2023-12-30 05:48:58

声明式导航传参?

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

文章来源:https://blog.csdn.net/2302_79245293/article/details/135300117
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。