vue2.7如何在setup中使用beforeRouteEnter

[Miofly]

vue2.7如何在setup中使用beforeRouteEnter

[chenxch]

如果你是用optionsAPI的setup你应该可以从root.$router获取到
如果是script setup 可以通过 getCurrentInstance 获取到instance再去获取root

[Miofly]

optionsAPI 没有这个问题，问题就是 setup 语法糖

[chenxch]

const instance = getCurrentInstance()
  const { root } = instance.setupContext
  root.$router.beforeEach((to, from, next) => {
    next()
  })

[chenxch]

<script lang="ts">
import { defineComponent, ComponentPublicInstance } from 'vue'

interface IInstance extends ComponentPublicInstance {
  setPathFrom(from: string): void
}

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      const instance = vm as IInstance
      instance.setPathFrom(from.path)
    })
  },
})
</script>

<script lang="ts" setup>
let pathFrom: string
const setPathFrom = (path: string) => {
  pathFrom = path
  console.log('vue-route::from::', pathFrom)
}

defineExpose({ setPathFrom })
</script>

#302

[Alfred-Skyblue]

defineComponent:

<script lang="ts">
export default defineComponent({
  beforeRouteEnter(to, from, next) {
    /* code */
    next()
  }
})
</script>

script setup:

<script lang="ts" setup>
defineOptions({
  beforeRouteEnter(to, from, next) {
    /* code */
    next()
  }
})
</script>