Vue.js 表单页面从新页面返回时丢失其数据答案

【问题标题】：Vue.js form page loses its data when coming back from a new pageVue.js 表单页面从新页面返回时丢失其数据
【发布时间】：2020-11-03 03:26:41
【问题描述】：

我有一个基本上是一个大文本区域的 Vue.js 页面。如果用户在该页面上点击“设置”并打开“设置”页面，然后返回原始页面，则 textarea 数据全部消失。肯定有一种简单的方法可以在不将所有内容保存到数据库或其他东西的情况下不丢失所有内容，对吧？

我正在使用 Vue 路由器。

Vue Router 是否有类似模态窗口（但用于智能手机应用程序）之类的东西，可以关闭以保存下面的所有内容？

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

我会在路由路径中对表单 ID 进行编码，并设置 props=true 以便将 ID 传递给组件的 prop：

// router.js
export default new VueRouter(
  routes: [
    {
      path: "/form/:id",
      name: "form",
      component: () => import("@/components/MyForm.vue"),
      props: true
    }
  ]
)

// MyForm.vue
export default {
  props: {
    id: {
      type: [Number, String],
      default: 0,
      required: true,
    },
  },
  data() {
    return {
      text: "The text " + this.id,
    };
  },
}

然后使用<keep-alive>复用cached views，并使用路由的完整路径作为key for router-view：

<keep-alive>
  <router-view :key="$route.fullPath" />
</keep-alive>

demo

【讨论】：

谢谢托尼。我浏览了你的演示，它可以工作。但是，当我将参数传递给组件时，如下所示： My Form 我只能做一次，第一次。之后，组件总是会收到第一次调用的参数。我的表单页面兼作视图页面，其中 textarea 在可编辑之前是只读的。
codesandbox.io/s/… 我希望 textarea 显示每个链接的 ID，但它只显示在第一个链接上。