VueUse 的 Back Button 是什么？怎么用？

在前端开发的世界里，用户体验是至关重要的一环，而页面的后退功能，看似简单，却对用户体验有着直接的影响，VueUse 提供的 Back Button 就是一个能让我们更好地掌控页面后退行为的实用工具，VueUse 的 Back Button 究竟是什么？又该如何使用它呢？下面我们就来详细探讨。

VueUse 的 Back Button 是什么？

VueUse 是一个基于 Vue 3 的实用工具库，它提供了一系列功能丰富且易于使用的组合式函数，帮助开发者更高效地构建 Vue 应用，其中的 Back Button 就是专门用于处理浏览器后退按钮行为的函数。

它可以让我们在 Vue 应用中自定义当用户点击浏览器后退按钮时的操作，我们可以阻止默认的后退行为，或者在后退前执行一些特定的逻辑，像保存用户未提交的表单数据、提示用户确认是否要离开当前页面等。

VueUse 的 Back Button 怎么用？

（一）安装 VueUse

我们需要在项目中安装 VueUse，如果你的项目是基于 npm 的,那么可以在终端中运行以下命令：

npm install @vueuse/core

如果是使用 yarn ,则运行：

yarn add @vueuse/core

（二）引入 Back Button 函数

在需要使用 Back Button 的 Vue 组件中,我们引入它：

import { useBackButton } from '@vueuse/core'

（三）基本使用示例

下面是一个简单的示例，展示如何使用 Back Button 来阻止默认的后退行为：

<template>
  <div>
    <p>这是一个测试页面</p>
  </div>
</template>
<script>
import { useBackButton } from '@vueuse/core'
export default {
  setup() {
    const { stop } = useBackButton(() => {
      // 在这里可以添加你自定义的逻辑
      console.log('后退按钮被点击，默认行为已阻止')
      return true // 返回 true 表示阻止默认的后退行为
    })
    return {
      stop
    }
  }
}
</script>

在这个示例中，当用户点击浏览器后退按钮时，会执行我们传入的回调函数，在回调函数中，我们打印了一条信息，并且返回了 true ，这样就阻止了浏览器默认的后退行为，如果我们希望在某些条件下才阻止后退，比如用户还有未保存的表单数据,我们可以这样修改：

<template>
  <div>
    <input v-model="formData" type="text" placeholder="输入一些内容" />
    <p>这是一个测试页面</p>
  </div>
</template>
<script>
import { useBackButton } from '@vueuse/core'
export default {
  data() {
    return {
      formData: ''
    }
  },
  setup() {
    const { stop } = useBackButton(() => {
      if (formData) {
        // 如果表单数据不为空，提示用户是否确认离开
        const confirmResult = confirm('你有未保存的表单数据，确认要离开吗？')
        if (confirmResult) {
          return false // 返回 false 表示不阻止后退
        } else {
          return true // 返回 true 表示阻止后退
        }
      }
      return false // 如果表单数据为空，不阻止后退
    })
    return {
      stop
    }
  }
}
</script>

（四）与 Vue Router 结合使用

在实际项目中，我们经常会使用 Vue Router 来管理路由，Back Button 如何与 Vue Router 结合使用呢？

假设我们有一个多页面的 Vue 应用，使用 Vue Router 进行路由跳转，当用户点击浏览器后退按钮时，我们希望它能按照 Vue Router 的历史记录进行后退，同时在某些页面（比如编辑页面）可以自定义后退行为。

确保你已经正确配置了 Vue Router ，我们可以这样使用 Back Button ：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
import { useBackButton } from '@vueuse/core'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const { stop } = useBackButton(() => {
      // 检查当前路由是否是需要自定义后退行为的页面（比如编辑页面）
      if (router.currentRoute.value.name === 'editPage') {
        const confirmResult = confirm('你正在编辑内容，确认要离开吗？')
        if (confirmResult) {
          // 如果用户确认离开，执行 Vue Router 的后退
          router.back()
          return false
        } else {
          return true
        }
      }
      // 其他页面按照 Vue Router 正常后退
      return false
    })
    return {
      stop
    }
  }
}
</script>

在这个示例中，我们通过获取当前的路由信息，判断是否是特定页面（这里假设为 'editPage' ），如果是，就提示用户确认是否离开；如果不是，就按照 Vue Router 的默认后退行为执行。

（五）更多高级用法

除了上述基本用法，VueUse 的 Back Button 还有一些其他的特性和用法。

我们可以通过传递第二个参数来设置事件监听的选项。

const { stop } = useBackButton(() => {
  // 回调函数
}, { capture: true }) // 设置 capture 为 true 表示在捕获阶段监听事件

我们还可以在组件销毁时停止对后退按钮事件的监听，在 Vue 3 中，我们可以使用 onUnmounted 钩子：

<template>
  <div>
    <p>这是一个测试页面</p>
  </div>
</template>
<script>
import { useBackButton, onUnmounted } from '@vueuse/core'
export default {
  setup() {
    const { stop } = useBackButton(() => {
      console.log('后退按钮被点击')
      return true
    })
    onUnmounted(() => {
      stop() // 在组件销毁时停止监听
    })
    return {
      stop
    }
  }
}
</script>

VueUse 的 Back Button 为我们在 Vue 应用中处理浏览器后退按钮行为提供了极大的便利，通过简单的引入和配置，我们可以根据项目的实际需求，灵活地自定义后退行为，提升用户体验，无论是阻止默认后退、结合 Vue Router 使用，还是进行更高级的事件监听设置，它都能满足我们的开发需求，希望通过本文的介绍，你能更好地掌握 VueUse Back Button 的使用方法,在前端开发中创造出更出色的用户体验。