Vue3中使用setup script语法中如何使用 beforeRouterEnter??

Question

如题，想在setup script语法中监听 路由信息没有找到 beforeRouterEnter的用法

Answer 1

安装：npm i unplugin-vue-define-options -D
配置 vite.config.ts

import DefineOptions from 'unplugin-vue-define-options/vite'

...
plugins: [
    DefineOptions()
]
...

之后可以在项目中定义option项：

defineOptions({
  beforeRouteEnter (to, from) {
      ...
  }
})

Answer 2

无法直接在<script setup>中使用，只能用两个script标签

<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>

github 有个讨论的帖子Usage of beforeRouteEnter with <script setup>