Vue.js form page loses its data when coming back from a new page

Question

I have a Vue.js page that is basically one big textarea. If the user taps "Settings" on that page and opens the Settings page, then goes back to the original page, the textarea data is all gone. Surely there must be an easy way of not losing everything without saving it to a database or something, right?

I'm using Vue Router.

Does Vue Router have something like a modal window (but for use in a smart phone app) that can be dismissed so everything underneath is saved?

Answer 1

I would encode the form ID in the route path, and set props=true so that the ID is passed to the component's 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,
    };
  },
}

Then use <keep-alive> to reuse cached views , and use the route's full path as the key for router-view :

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

demo