在 Nuxt JS 中重新加载页面后，路由参数值消失

Question

我使用 this.$router.push({name: 'nameComponent', params: {data:someObject}}) 来切换页面。在下一页上，首次加载页面时会检测到参数。但是，重新加载页面后，不再检测到参数。

仅供参考，Nuxt JS 中的路由配置已经使用历史模式

Answer 1

您正在使用路由器在不同组件之间共享状态。刷新路由时，不会保留从页面 A 传递到 B 的原始数据 - 这是预期的行为，因为您没有访问正在获取数据的页面 A。

如果您希望在页面刷新后能够访问数据，则需要从页面 B 中的源再次获取数据，将其缓存在本地或更改组件和路由的工作方式。

来源

从源获取它意味着您不会在路由中传递实际数据，只传递 id，然后在页面 B 中再次获取数据。

缺点

您可能会两次获取相同的数据

本地存储

您可以持久化您在页面 A 中加载的数据。您可以通过以下方式直接执行此操作

1. 直接保存到local storage
2. 使用像localForage这样的库
3. 使用Vuex 和vuex-persist 插件

在页面 B 中，您可以访问本地存储并从那里检索数据。

缺点

这仍然需要用户在某个阶段访问过页面 A，如果这是很久以前，如果用户继续直接访问页面 B，则数据可能已经过时。这也意味着您必须检查数据是否存在，因为用户可能已经清除了缓存。

调整组件和路由架构

可能是要走的路。您可以创建一个获取数据的父组件，以及两个获取作为 props 传递的数据的子组件，例如：

// Routes 
cont routes = {
    path: '',
    name: 'parent',
    compoent: Parent.vue,
    children: [{
        path: '/pageA'
        name: 'pageA',
        component: PageA
      },
      {
        path: '/pageB'
        name: 'pageB',
        component: PageB
      }
    ]

// Parent.vue
<template>
 <router-view :user="user" />
</template>

<script>
  export default {
    data() {
      return {
        user: null
      }
    }
  },
  created() {
    ...fetch data
  }
</script>


// PageA.vue & PageB.vue

<template>
 ...
</template>

<script>
  export default {
    props: {
      user: {
        type: Object,
        require: true
      }
    }
  }
</script>