vue js 路由传参显示或不显示参数处理、页面刷新是否会丢失参数

路由传参方式有params、query2种，可以控制是否显示参数

1、params传参

• 传参时页面路由地址不显示参数，刷新页面时参数会丢失
  点击按钮时跳转页面

// 跳转到的页面路由配置文件
{
  path: '/XXX,
  name: 'A', // 路由别名
  component: XXX
}
/// 点击方法：
this.$router.push({
  name: 'A', // 必须传name，不能传path或其他
  params: {
    id: 'aaa'
  }
})
// 接收参数的页面
console.log(this.$route.params.id)

• 传参时页面路由地址显示参数，刷新页面时参数不会丢失

// 跳转到的页面路由配置文件
{
  path: '/A' 或 , path: '/A/:id' 
  name: 'XXX',
  component: XXX
}
/// 点击方法：
this.$router.push({path: '/A?id=aaa'})
或
this.$router.push({path: '/A/aaa'})
// 接收参数的页面
console.log(this.$route.params.id)

2、query传参

• 传参时页面路由地址显示参数，刷新页面时参数不会丢失

// 跳转到的页面路由配置文件
{
  path: '/A' 或 , path: '/A/:id' 
  name: 'XXX',
  component: XXX
}
/// 点击方法：
this.$router.push({
  name: 'A',
  query: {
    id: 'aaa'
  }
})
// 接收参数的页面
console.log(this.$route.query.id)