在vue中页刷新时丢失路由器数据

Question

我有两个视图组件。

第一个组件productList.vue,呈现产品列表。每一个列出的产品路线您的产品信息(第二视图)。

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

函数的参数product是一个具有name、color、URL等字段的对象。

在第二个视图productInfo.vue中，我获取created钩子中的数据并呈现它。

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

在完成产品信息页面的普通重新加载之前，它可以正常工作，否则将丢失传递的product参数数据。

我试过所有的解决方案在线，但仍然无法解决我的问题。我正在考虑localStorage，但似乎不是持久的，也不是从服务器检索数据，而是一个昂贵的操作。还有别的解决办法吗？

编辑：

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,
});

Answer 1

在路由参数中持久化api数据对我来说不是一个好主意。您可以使用路由器存储数据对象的id，然后从中央存储区(例如维克斯)检索该对象。

此外，在刷新页面时，您将释放Vue存储在内存中的所有数据。因此，如果您的目标是减少页面刷新时的api调用，则可以挂起为此设计的Vuex插件(例如vuex-persistedstate)，或者使用本地存储来存储数据。

正如我前面提到的，一个重要的注意事项是，页面刷新Vue会丢失所有的路由信息，它会解析当前位置来恢复该信息。因此，您必须在路由路径中持久化该信息，方法是在其上附加参数。在此之后，数据解析将在刷新后可用。

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

Answer 2

向路由器添加id param，如下所示: product/:id

先检查数据

​

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()
})

​