vue router传参及接受参数方式

vue传参方法一

1，路由配置
{
path: ‘/describe/:id’,
name: ‘Describe’,
component: Describe
}
2，使用方法
// 直接调用$router.push 实现携带参数的跳转

 this.$router.push({
//  这个id是一个变量,随便是什么值都可以
    path: /describe/${id}`,
 })

3，获取方法（在describe页面）

$route.params.id

使用以上方法可以拿到上个页面传过来的id值，相当于get请求，注意是route，当页面刷新时，参数不会丢失。动态路由一般用来传一个参数时居多

vue传参方法二

1，路由配置
{
path: ‘/describe’,
name: ‘Describe’,
component: Describe
}
（这个地方默认配置就可以了，不用做任何的处理）
2，使用方法

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

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。相当于post请求。当页面刷新时，参数会丢失。
3，获取方法（在describe页面）
$route.params.id
也用params获取就可以了

vue传参方法三

//路由配置文件中
{
     path: '/detail',
     name: 'Detail',
     component: Detail
   }
//跳转时页面
this.$router.push({
  path: '/detail',
  query: {
    name: '张三'，
    id: 1,
  }
})
 
//跳转后页面获取参数对象
this.$route.query  ，当页面刷新时，参数不会丢失。