Vue路由传递获取参数

通过Vue传递参数可以分为两种方式：

• params参数
• query参数

params参数

params参数传递方式分两种：

• 路由配置参数
• 使用$router的push编程式添加

路由配置参数

在路由中配置如下：

{
  path: '/user/:id',
  name: 'user',
  component: UserDetail
}

:id为路径里的参数。传递参数：

this.$router.push({path: `/user/${id}`})

router.push添加params参数

路由配置：

{
  path: '/user',
  name: 'user',
  component: UserDetail
}

传递参数

this.$router.push({
         name: 'user',
          params: {
            id: id
          }
        })

这里需要注意的是：这种方式传递参数，push的对象只能是命名的路由。如果push的配置对象使用path，那么params参数会被忽略。

获取参数

不管是在路由配置params参数还是通过router.push()编程式传递参数，这些参数都是可以通过params来获取。

this.$router.params.id

查询参数

查询参数类似于在路径上添加查询字符串：

/user?id=123

传递参数

this.$router.push({
          path: '/user',
          query: {
            id: id
          }
        })

获取参数

使用查询参数传递参数，需要使用router.query来获取参数。

$route.query.id