vue3 setup 使用 beforeRouteEnter 组件内路由守卫

vue3 setup 使用 beforeRouteEnter 组件内路由守卫

setup 中只有onBeforeRouteLeave、onBeforeRouteUpdate两个钩子函数，
没有beforeRouteEnter对应的钩子函数，所以无法在setup中直接使用

<script setup>
onBeforeRouteLeave((to, from) => {
  // 在导航离开渲染该组件的对应路由时调用
  // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  // 钩子没有调用是因为 这个路由是直接输入路由路径进入的，为路由数组中的第一个，没有上一级，所以这个钩子没有调用
  console.log('beforeRouteLeave');
  user.value = {
    id: '',
    name: ''
  };
});

onBeforeRouteUpdate((to, from) => {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
  // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  console.log('beforeRouteUpdate');
  user.value = users.filter(user => user.id === to.params.id)[0];
});
</script>

解决方案：
使用选项式api 并使用defineExpose 将defineComponent中需要使用到的响应式数据暴露
就可以使用onBeforeRouteLeave了

<script>
import {defineComponent} from "vue";

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    console.log('beforeRouteEnter');
    next(function (vm) {
      // console.log(vm)
      vm.user = vm.users.filter(user => user.id === to.params.id)[0];
    });
  }
});
</script>

<script setup>
import {reactive, ref} from "vue";
import {onBeforeRouteLeave, onBeforeRouteUpdate, useRouter} from "vue-router";

const users = reactive([
  {
    id: '1',
    name: 'user1'
  },
  {
    id: '2',
    name: 'user2'
  },
  {
    id: '3',
    name: 'user3'
  },
]);

const user = ref({
  id: '',
  name: ''
});
defineExpose({users, user});

const router = useRouter();
const bru = () => {
  router.push({
    // path: '3',
    params: {id: '3'}
  });
}

const back = () => {
  router.back();
}
onBeforeRouteLeave((to, from) => {
  // 在导航离开渲染该组件的对应路由时调用
  // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  // 钩子没有调用是因为 这个路由是直接输入路由路径进入的，为路由数组中的第一个，没有上一级，所以这个钩子没有调用
  console.log('beforeRouteLeave');
  user.value = {
    id: '',
    name: ''
  };
});

onBeforeRouteUpdate((to, from) => {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
  // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  console.log('beforeRouteUpdate');
  user.value = users.filter(user => user.id === to.params.id)[0];
});
</script>
<template>
  <div>
    <h1>User</h1>
    <h1 v-text="user.name"></h1>
    <button type="button" @click="bru">beforeRouteUpdate</button>
    <button type="button" @click="back">beforeRouteLeave</button>
  </div>
</template>

<style scoped>

</style>