vue3中使用beforeRouteEnter

在使用Vue3中，遇到需要在路由改变时候，设置页面中数据，但Vu3中router组合式API提供的onBeforeRouteLeave, onBeforeRouteUpdate函数不满足要求，遂采用beforeRouteEnter，但使用了setup语法糖，所以需要重新开一个普通版script来使用beforeRouteEnter。

若你使用的是setup函数

<script>
import { beforeRouteEnter, setup,defineComponent} from '@vue/runtime-core'
export default defineComponent({
  beforeRouteEnter(to, from, next) {
    next((vm)=>{
      vm.loading = false//直接通过vm访问修改
    })
  },
  setup(){
    loading = ref(true)
  }
})  
</script>

若你使用的是<script setup>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  beforeRouteEnter(to, from, next) {
    next((vm)=>{
      vm.loading = false
    })
  }
})
</script>

<script setup>
import {ref, defineExpose} from '@vue/runtime-core'
const loading = ref(true)
defineExpose({ loading}); //核心代码否则beforeRouteEnter中无法更新到loading数据,同理若该数据需要再父组件通过ref.childComponent.loading更新同样需要加此句将属性暴露出去
</script>

123123