首页 > 解决方案 > 通过浏览器的后退按钮取消异步数据 api 调用时,有什么方法可以返回到同一页面

问题描述

我一直在使用 Nuxtjs 和 axios 进行 API 调用。在一个名为帖子列表的页面中,一旦我选择了一个假设导航到详细信息页面的帖子,在加载到页面时,一旦我单击浏览的后退按钮并尝试再次返回相同的列表页面而不访问详细信息页面。它给出了 404 和 post not found 错误。

有什么好的方法可以防止吗?

这是代码详细信息页面

async asyncData({ $api, route, $auth, error }) {
    try {
      // console.log(route.params)
      const { feed } = await $api.Feed.feedDetails(
        route.params.id,
        $auth.loggedIn
      )
      if (route.query.origin === 'channel') {
        const { channel } = await $api.Channels.channelDetails(
          route.query.cId,
          $auth.loggedIn
        )
        return { feed, channel_details: channel }
      } else {
        return { feed }
      }
    } catch (e) {
      error({ statusCode: 404, message: 'Feed not found' })
    }
  },

我在页面详细信息页面中有这个中间件

export default async function (context) {
  if (context.$auth.$state.loggedIn) {
    const params = {
      page: 1,
    }
    const { threads } = await context.$api.Messages.MessageThreadList(params)
    const { notifications } = await context.$api.Users.getNotifications({
      last_id: 0,
    })

    context.store.commit('addThreadList', threads)
    context.store.commit('addNotification', notifications)
  }
}

标签: javascriptvue.jsaxiosnuxt.js

解决方案


推荐阅读