vue路由传参

声明式导航传参 

1 动态路由传参

  • 路由规则path -> /article/:aid

  • 导航链接 查看第一篇文章

  • 组件获取参数: this.$route.params.aid

    2 查询参数传参数

  • /路径?参数1=值&参数2=值

  • 路由规则path -> /路径

  • 导航链接 查看第一篇文章

  • 组件获取 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');

你可能感兴趣的:(vue.js,前端,javascript)