vue路由傳參的三種方式

方式一

通過query方式傳參

這種情況下 query傳遞的參數會顯示在url后面

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

對應路由配置：

{
     path: '/detail',
     name: 'Detail',
     component: Detail
 }

子組件獲取參數

this.$route.query.id

方式二

通過params方式傳參

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

路由配置

{
     path: '/detail',
     name: 'Detail',
     component: Detail
   }

獲取參數

this.$route.params.id

方式三

直接在路由地址后面拼接參數

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

路由配置

{
     path: '/detail/:id',
     name: 'Detail',
     component: Detail
   }

獲取參數

this.$route.params.id