如何在Nuxt Vue应用的组件中实现页面重定向？

你可以根据你使用的Nuxt版本选择对应实现方式：

Nuxt 3 实现方式 #

Nuxt3 内置了navigateTo全局工具方法，直接在删除逻辑执行成功后调用即可：

// 组件内的删除处理逻辑
const handleDelete = async () => {
  try {
    // 执行你的删除接口请求
    await $fetch('/api/delete/item', { 
      method: 'DELETE', 
      body: { id: 待删除资源ID } 
    })
    // 删除成功后重定向到目标页面，replace参数设为true可替换当前历史记录
    await navigateTo('/资源列表页路径', { replace: true })
  } catch (err) {
    console.error('删除失败：', err)
  }
}

如果需要跳转到外部站点，额外添加external: true参数即可。

Nuxt 2 实现方式 #

Nuxt2 可以直接调用内置的Vue Router实例提供的跳转方法：

export default {
  methods: {
    async handleDelete() {
      try {
        // 执行你的删除接口请求
        await this.$axios.delete('/api/delete/item', { 
          data: { id: 待删除资源ID } 
        })
        // 删除成功后重定向到目标页面，replace方法会替换当前历史记录
        this.$router.replace('/资源列表页路径')
        // 若需要保留当前页历史记录，可使用push方法：
        // this.$router.push('/资源列表页路径')
      } catch (err) {
        console.error('删除失败：', err)
      }
    }
  }
}

小提示：删除详情页资源的场景下更推荐使用replace方法，避免用户点击浏览器后退按钮回到已不存在的资源页面，优化使用体验

内容的提问来源于stack exchange，提问作者Čamo