從新頁面返回時，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>

演示