如何在vue-router中区分push和back跳转，仅在push时执行指定逻辑

解决方案 #

你可以通过以下两种稳定方案区分跳转类型：

方案1：跳转时携带自定义状态标记（推荐，侵入性最低）

vue-router 3 的push方法支持传入自定义state，该数据会存储在浏览器历史栈中，仅当前次push跳转生效，返回操作不会携带该标记：

1. 触发push跳转的页面代码：

// 从其他页面跳转进入page2时添加标记
this.$router.push({
  path: '/page2',
  state: {
    isPushEnter: true
  }
})

2. page2页面内判断逻辑：

import { getCurrentInstance, onMounted } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const instance = getCurrentInstance()
    const route = instance.proxy.$route

    onMounted(() => {
      if (route.state?.isPushEnter) {
        // 是push跳转进入，执行你的特定逻辑
        console.log('push进入页面')
        // 可选：用完删除标记，避免刷新页面重复触发
        delete route.state.isPushEnter
      } else {
        // 是back返回进入
        console.log('back返回页面')
      }
    })

    return {}
  }
})

方案2：全局监听返回事件统一标记

如果涉及多页面需要区分跳转类型，可以全局统一标记返回操作，不需要每个跳转都加参数：

1. 项目入口main.js中添加全局监听：

// 全局存储跳转类型标记
let isBackNavigation = false
// 监听浏览器后退/前进/go/back操作，该事件仅在非push/replace跳转时触发
window.addEventListener('popstate', () => {
  isBackNavigation = true
  // 异步重置标记，避免影响后续正常跳转判断
  setTimeout(() => {
    isBackNavigation = false
  }, 0)
})
// 将标记挂载到vue原型上方便全局调用
Vue.prototype.$isBackNavigation = () => isBackNavigation

2. page2页面内直接判断：

import { getCurrentInstance, onMounted } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const instance = getCurrentInstance()

    onMounted(() => {
      if (instance.proxy.$isBackNavigation()) {
        // 是back返回进入
        console.log('back返回页面')
      } else {
        // 是push跳转进入，执行你的特定逻辑
        console.log('push进入页面')
      }
    })

    return {}
  }
})

注意事项 #

• 方案1的state数据会随浏览器历史栈存在，刷新页面不会丢失，如果需要区分刷新场景可以额外加performance.navigation.type判断：performance.navigation.type === 1代表当前页面是刷新加载的。
• 方案2的全局监听仅绑定一次即可，不要在单页面组件内重复绑定，避免内存泄漏。

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