【vue】路由跳转以及参数获取

【路由跳转 query传参】

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

【query传参 ，获取参数】

const id = this.$route.query.id

【路由跳转 params传参】

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

【params传参 ，获取参数】

const id = this.$route.params.id

【区别】

params传参，参数不会拼接到页面路径。
params传参，页面跳转后刷新值不存在。
params传参是路由的一部分，路由表配置路由的时候，须要在路由后面添加参数名。

query传参，参数会拼接到页面路径。
query传参，页面跳转后刷新也可正常取值。
query传参，会拼接在URL后面，配置路由时可以不用添加，跳转的时候携带即可。

【params传参，数据丢失分析】

• params传参，需要在配置路由的时候在路径后面加上参数名，例如/home/:id。如果没有写的话，当页面刷新之后，所传参数就会不存在。
• 路由配置了参数/home/:id，但是路由跳转的时候没有传参数，路由跳转过去就会没有数据。
• 传参里面有对象的话，再次刷新页面数据丢失，解决办法：传参的时候将参数JSON.stringify,获取到值之后JSON.parse。

【query传参，数据丢失分析】

• query传参，里面有对象的话，页面再次刷新丢失。解决办法：传参的时候将参数JSON.stringify,获取到值之后JSON.parse；或者；触发点击事件的时候将需要传递的参数存储到本地。