vue中返回按钮小技巧

在项目搭建过程中，常常会遇到一个需求，当用户从某个页面进入到另一个页面后，需要有个按钮可以返回，若单纯的直接返回上一个页面，则会存在用户直接通过url进入该页面，导致返回直接跳出当前项目。

解决方案

// 返回事件

import { useRouter } from 'vue-router'
const router = useRouter()
const onClickLeft = (): void => {
  // 通过history.state.back获取上一个页面的路径
    // 若为null，则表示用户是直接通过url访问
    // 若不为null，则表示用户是通过项目进行访问的
  const flag = history.state.back ? true : false
  if (flag) {
    router.back()
  } else {
    // 返回首页
    router.push('/')
  }
}