＜script setup＞组件内的路由守卫

在 Vue 3 中，<script setup> 提供了更简洁的方式来编写组件逻辑，但这并不意味着不能在其中编写路由守卫。然而，路由守卫通常是在全局、路由独享或组件内（在 Vue 2 中是通过 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 钩子）来定义的，而不是直接在 <script setup> 中。

要在 <script setup> 组件内使用路由守卫，需要按照 Vue Router 的常规方式定义这些守卫，但可以将它们放置在 <script setup> 的外部，然后通过 Composition API 的方式在组件内部使用它们。

下面是一个使用 <script setup> 的 Vue 3 组件内路由守卫的示例：

复制代码

<template>  
  <div>  
    <!-- 组件内容 -->  
  </div>  
</template>  
  
<script setup>  
import { onBeforeUnmount, onMounted } from 'vue';  
import { useRoute, useRouter } from 'vue-router';  
  
// 定义路由守卫逻辑  
const routeGuard = () => {  
  const route = useRoute();  
  const router = useRouter();  
  
  // 示例：检查用户是否已登录  
  const isUserLoggedIn = /* 逻辑来检查用户是否登录 */;  
  
  if (!isUserLoggedIn) {  
    // 如果用户未登录，重定向到登录页面  
    router.push('/login');  
    return false;  
  }  
  
  // 如果用户已登录，继续执行组件逻辑  
  return true;  
};  
  
// 在组件挂载时调用路由守卫  
onMounted(() => {  
  routeGuard();  
});  
  
// 在组件卸载前清理可能存在的守卫逻辑（如果需要的话）  
onBeforeUnmount(() => {  
  // 清理逻辑（如果有的话）  
});  
</script>

在上面的示例中，我们导入了 useRoute 和 useRouter 来访问当前路由和路由实例。定义了一个 routeGuard 函数，该函数检查用户是否已登录，并据此决定是否重定向到登录页面。

onMounted 钩子用于在组件挂载后调用 routeGuard 函数。如果需要在组件卸载前执行某些清理操作，可以使用 onBeforeUnmount 钩子。

请注意，这个示例假设你已经有一个逻辑来检查用户是否已登录（isUserLoggedIn）。在实际应用中，你可能需要调用 API 或检查本地存储来确定用户的登录状态。

如果需要在组件内部监听路由变化并执行守卫逻辑，你可以在 setup 函数中使用 watchEffect 或 watch 来监听路由变化：

复制代码

<script setup>  
import { watchEffect } from 'vue';  
import { useRoute } from 'vue-router';  
  
const route = useRoute();  
  
watchEffect(() => {  
  // 当路由变化时，执行守卫逻辑  
  const isUserLoggedIn = /* 逻辑来检查用户是否登录 */;  
  if (!isUserLoggedIn && route.path !== '/login') {  
    // 如果用户未登录且当前路径不是登录页面，重定向到登录页面  
    router.push('/login');  
  }  
});  
</script>

在这个例子中，watchEffect 会响应式地跟踪 route 对象的变化，并在变化时执行守卫逻辑。当然，你仍然需要确保在组件卸载时停止监听，以避免内存泄漏。这可以通过在 onBeforeUnmount 钩子中清除 watchEffect 来实现。