Vue-router路由傳參的三種方式

本文簡單介紹下三種路由傳參：

（1）在路由中配置

{
  path : ‘/home/:id’,
  name : ‘Dome’,
  component
}

然后寫調用的時候

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

取值：

$route.parms.id

 

（2）通過params傳參，通過name配置路由

路由配置：

{
  path : ‘/home’,
  name : ‘Home’,
  component : Home
}

this.$router.push({
  name : ‘Home’,
  params : {
    id : id
  }
})

獲取

$route.params.id

 

（3）使用path來配置路由，通過query來傳遞參數，參數會在url后邊的?id=?中顯示

路由配置：

{
  path : ‘/home’,
  name : ‘Home,
  component : Home
}

調用:

this.$router.push({
  path : ‘/home,
  query : {
    id : id
  }
})

獲取

this.$route.query.id

 

 

 

 

 

 

.