Losing router data on page refresh in vue

Question

I have two view components.
The first component, productList.vue, renders the list of products. Each listed product routes you to the product info(second view).

seeTheProduct(product) {
        this.$router.push({
          name: 'productinfo',
          params: { data: product }
        })
      }

function's parameter product is an object with name, color, URL, etc. fields.

In the second view, productInfo.vue, I get the data in created hook and render it.

created() {
      this.product = this.$route.params.data;
      console.log('the local product is ', this.product)
    }

it works fine until I do a normal reload of the product info page, I lose the passed product parameter data.

I tried all solutions online but still couldn't solve my problem. I was thinking about localStorage but it seems it's not that persistent, or again retrieve data from the server, but might be an expensive operation. Is there any other solution?

EDIT:
router.js:

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/admin",
    name: "admin",
    component: Admin,
    meta: { requiresAuth: true },
    children: [
      {
        path: "overview",
        name: "overview",
        component: Overview,
      },
      {
        path: "products",
        name: "products",
        component: Products,
      },
      {
        path: "profile",
        name: "profile",
        component: Profile,
      },
      {
        path: "orders",
        name: "orders",
        component: Orders,
      },
    ],
  },
  {
    path: "/adminlogin",
    name: AdminLogin,
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AdminLogin.vue"),
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
  {
    path: "/checkout",
    name: "checkout",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Checkout.vue"),
  },
  {
    path: "/productinfo",
    name: "productinfo",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/ProductInfo.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  routes,
});

how big is the data? and what does your router look like ATM? — Tibebes. M, Nov 28 '21 at 15:29
@Tibebes.M The data is an object which stores strings, numbers, arrays, and even nested arrays. I've updated the question and added my router.js — casper, Nov 28 '21 at 16:01

Igor Moraru · Accepted Answer · 2021-11-28T18:04:34.583

Persisting api data in route params does not seem to me a good idea. You can use the router to store the id of data object, and then retrieve that object from a central store by id (Vuex for example).

Also, on refreshing the page you loose all the data stored in memory by Vue. Thus, if your goal is to reduce api calls on page refresh, you can hook a Vuex plugin (vuex-persistedstate for example) designed for that, or use the local storage to store data.

An important note, as I mentioned, on page refresh Vue loses all route info, and it parses the current location to restore that info. Thus, you have to persist that info in route path, by appending the params to it. After that, the data param will be available after refresh.

{
    path: "/productinfo/:data",
    name: "productinfo",
    component: () => import("../views/ProductInfo.vue"),
  },

score -1 · Answer 2 · answered Nov 18 '21 at 07:04

add id param to router like this: product/:id

check data before each

router.beforeEach(async(to, from, next) => {
  if (to.name == 'product' && to.params.product == undefined) {
    await get data from server by to.params.id
    to.params.product = response.data
    next()
  }
  next()
})

Losing router data on page refresh in vue

2 Answers2