在 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
来实现。