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

 

 

 

 

 

 

.