「这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战」

input 中的数据应该保存在哪儿？

1 场景描述

Vue 项目中某个页面使用router.push方法进行路由跳转，并携带参数：id

this.$router.push({
  name: "info",
  params: { id: this.id }, // 假设 this.id = 'ds'
});

目标页面中的搜索框 value 值会从路由参数获取

this.form = {
  id: this.$route.params.id
}

现在我们刷新页面，会发现搜索框中的 value 值为空 这是因为我们没有在路由路径中使用“动态路径参数”

// 我们是这么写的
const routes = [
  { path: '/info', component: Info }
]

// 没有用动态路径参数
const routes = [
  { path: '/info/:id', component: Info }
]

这会导致刷新页面时，this.$route.params.id重置为空 现在我们的需求是：在刷新页面时，搜索框中的 id 不变

2 解决方案

2.1 使用动态路径参数

const routes = [
  { path: '/info/:id', component: Info }
]

现在，即使页面刷新，只要 URL 未发生变化，this.$route.params.id的值始终不变

2.2 使用 localStorage

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。

localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。 我们可以在路由跳转的时候，使用 localStorage 将 id 存储在本地

localStorage.setItem('id', this.id)

并且目标页面搜索框的 value 不去this.$route.params中获取，而去本地存储中获取

this.form = {
  id: localStorage.getItem('id')
}

3 场景抽象

这个问题的本质是如何存储某些值，使得在页面刷新时这些值不会丢失 通常我们可以采用这些方法：将值拼接到 URL、存储在本地、或者使用 vuex 保存等等，根据具体业务场景作出选择