路由 params 传参 - 刷新页面后参数丢失问题解决

路由跳转，params传参 - 不在 url 地址拼接 刷新页面内后数据会丢失

this.$router.push({
    // path: '/tz-person-manage',
    name: 'TzPersonManage',
    params: {
      personInfo: JSON.stringify({ name: '张三', age: 99 })
    }
 })

刷新页面参数丢失问题解决

• 判断路由上有没有参数
  • 有参数
    1. 直接用
    2. 将参数存到本地
  • 没有参数
    1. 从本地取数据

create() {
	const personInfo = JSON.parse(this.$route.params.personInfo || '{}') // 从路由中取出要存下来的数据
	// 判断路由上有没有 personInfo 数据
	if (Object.entries(personInfo).length !== 0) {
	  // 有 personInfo 数据，直接赋值；并将数据存到本地
	  this.personInfo = personInfo
	  sessionStorage.setItem('personInfo', JSON.stringify(personInfo) || {}) // 将数据存到本地存储中
	} else {
	  // 没有 personInfo 数据，从本地取出来赋值
	  this.personInfo = JSON.parse(sessionStorage.getItem('personInfo') || '{}') // 将数据从本地存储中取出
	}
}

【补充】

• 路由跳转携带参数规则
  1. 携带 query 参数，跳转用 name、path 都可
  2. 携带 params 参数，跳转只能用 name，用 path 会忽略 params 参数