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