VUE Router的三种路由传参方式

一、query方式

传递的参数会显示在路径中，刷新页面时参数不丢失

1、路由配置

{
  path:'/details',
  name: 'details',
  component: () => import('../views/details')
}

2、参数传递

this.$router.push({
  name: 'details',
  query: {
    id: 'xxx',
    name: 'xxx'
  }
})

3、接收参数

let id = this.$route.query.id
let name = this.$route.query.name

二、params方式

param方式与query方式的语法格式相似，不同的是传递的参数不会显示在路径中，且需要注意的是如果用户使用F5强制刷新浏览器，参数就会丢失

1、路由配置

{
  path:'/details',
  name: 'details',
  component: () => import('../views/details')
}

2、参数传递

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

3、接收参数

let id = this.$route.params.id
let name = this.$route.params.name

三、路径传参

路径传递需要对路径进行动态路由配置，接收参数时与params方式一样使用this.$route，需要注意的是如果定义了参数，不填写的的话访问时会报404.

1、路由配置

{
  path:'/details/:id',
  name: 'details',
  component: () => import('../views/details')
}

2、参数传递

this.$router.push('/details/' + id)

3、接收参数

let id = this.$route.params.id