Vue3 ＜script setup＞语法糖使用 beforeRouteEnter；vue3实现beforeRouteEnter

本身vue3是没有beforeRouteEnter方法的，但可以实现
注意： 建议使用方案1；方案2有瑕疵会导致无法定义组件name

方案1：在一个script标签里实现，参考链接

<script setup>
	defineOptions({
	  name: 'ExperienceMaintenance',
	  beforeRouteEnter(_to, _from, next) {
	    console.log('beforeRouteEnter执行',_to, _from, next);
	    next((vm) => {
	      const instance = vm
	      instance.getData() // 刷新列表数据（不缓存）
	    })
	  }
	})
	
	const getData = async () => {
	  console.log('出发对应方法');
	}
	
	// * beforeRouteEnter中要用到的方法，需要暴露出来
	defineExpose({ getData })

</script>

方案2：在两个script标签里实现
实现beforeRouteEnter

• vue3无beforeRouteEnter，但可以写。需要单独写一个<script>模块用于实现
• 注意新写的<script>需要和当前vue页的其他script使用相同的语言。
• 例如我的<script setup lang="jsx">是使用jsx语法，那么新的script就也要使用<script lang="jsx">jsx语法，只不过没有setup

<script lang="jsx">
import {defineComponent,} from "vue";
export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    // console.log('beforeRouteEnter',to, from, next);
    console.log(from.path.indexOf('/workOrderManagement/workOrderApplicationU') >= 0,from.path);
    if (from.path.indexOf('/workOrderManagement/workOrderApplicationU') >= 0) {
      to.meta.keepAlive = true
    } else {
      to.meta.keepAlive = false
    }
    next()

    // nextTick(()=>{
    // })

    // nextTick(()=>{
    //   next(function (vm) {
    //     console.log(111,vm)
    //     // vm.user = vm.users.filter(user => user.id === to.params.id)[0];
    //   });
    // })
  }
});
</script>

3. 问题： 使用了两个<script>标签实现beforeRouteEnter钩子后，就会导致当前页面不能设置组件名称name

defineOptions({ name: 'ExperienceMaintenance' })设置就会报错
也就是说通过include的缓存方式就行不通，只能使用v-if方式了

其他一种实现beforeRouteEnter
其他二种实现beforeRouteEnter