在 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 参数数据。

我尝试了所有 online but still couldn't solve my problem. I was thinking about localStorage but it seems it's not that persistent，或者再次从服务器检索数据，但可能是一项昂贵的操作。还有其他解决办法吗？

编辑：
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

像这样向路由器添加 id 参数：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()
})

Answer 2

在路由参数中保留 api 数据在我看来不是一个好主意。您可以使用路由器存储数据对象的 ID，然后通过 ID 从中央存储中检索该对象（例如 Vuex）。

此外，在刷新页面时，您会丢失 Vue 存储在内存中的所有数据。因此，如果您的目标是减少页面刷新时的 api 调用，您可以挂接为此设计的 Vuex 插件（例如 vuex-persistedstate），或者使用本地存储来存储数据。

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

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

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

Losing router data on page refresh in vue

router

vue.js