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

Question

我有一个 Vue.js 页面，它基本上是一个大的 textarea。 如果用户在该页面点击“设置”并打开“设置”页面，然后回到原始页面，则textarea数据全部消失。 当然，必须有一种简单的方法不会丢失所有内容而不将其保存到数据库或其他东西，对吗？

我正在使用 Vue 路由器。

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

Answer 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>重用缓存的 views ，并使用路由的完整路径作为router-view的key ：

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

演示