Vue路由回退/跳转识别

1. 前言

在前端中采用单页面模式开发，经常会需要滑动位置、页面状态异常等问题，如何确定是回退还是跳转对解决问题时有帮助。

2. 判断方案

有两种方案可以进行判断，原理都是采用判断 vue-router 在跳转时会切换 state，而state中存在 postion 作为计数器，如果计数器增加则为跳转，否则为回退。根据该原理可以通过两种方案进行判断，

2.1 全局支持（Composition API 写法）

import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export function useRouteDirection() {
  const router = useRouter()
  const route = useRoute()
  const direction = ref('') // back / forward / replace / unknown
  const lastPos = ref(window.history.state?.position || 0)

  router.afterEach(() => {
    const currentPos = window.history.state?.position || 0

    if (currentPos > lastPos.value) {
      direction.value = 'forward'
    } else if (currentPos < lastPos.value) {
      direction.value = 'back'
    } else {
      direction.value = 'replace'
    }

    lastPos.value = currentPos
  })

  return { direction, route }
}

### 页面中使用
<script setup>
import { useRouteDirection } from '@/composables/useRouteDirection'

const { direction } = useRouteDirection()

watch(direction, (val) => {
  if (val === 'back') {
    console.log('👈 页面是回退进入的')
  } else if (val === 'forward') {
    console.log('👉 页面是跳转进入的')
  }
})
</script>

2.2 基于 onBeforeRouteEnter 判断（局部修改）

import { onBeforeRouteEnter } from 'vue-router'
onBeforeRouteEnter((to, from, next) => {
	const isBack = (window.history.state?.position || 0) <(sessionStorage.getItem('lastPos') || 0)
	sessionStorage.setItem('lastPos', window.history.state?.position || 0)
	next(vm => {
	if (isBack) {
		console.log('👈 用户是回退回来的')
		vm.isBack = true
	} else {
		console.log('👉 用户是跳转进入的')
		vm.isBack = false
	}
	})
})