我想在我的组件中使用 useRoute
,该组件在 onMounted 挂钩中调用。
类似的东西
import { checkUserAuth } from '@/common/CheckUserAuth' onMounted(async () => { await checkUserAuth() })
CheckUserAuth.ts 是:
import { useRouter } from 'vue-router' const router = useRouter() // here router is undefined export const checkUserAuth = async () => { const userStore = useUserStore() const userApi = new UserApi() const token = localStorage.getItem(TOKEN_NAME) const router = useRouter() // and here too router is undefined if (!token) { await router.push({ name: LOGIN_PAGE_ROUTE }) return } const userData = await userApi.fetchMasterInfo() userStore.setUser(userData) await router.push({ name: DASHBOARD_ROUTE }) }
我不明白为什么路由器到处都是未定义的,是否可以在不将路由器作为参数传递的情况下解决这个问题? (我想把checkUserAuth函数完全封装起来)
我知道我可以修复它
const router = useRouter() onMounted(async () => { await checkUserAuth(router) }) export const checkUserAuth = async (router: Router) => { await router.push({ name: DASHBOARD_ROUTE }) }
但这不是一个好的解决方案
useRouter的API必须在setup中调用,官方文档中有提到。你可以在https://router.vuejs.org/zh/api/#userouter(zh文档提到过)中看到这一点。 也许你可以编写这样的代码:
并在设置中调用它:
希望对您有帮助。
可组合项应该在设置中直接使用,除非它们的实现允许其他用途,否则需要根据每种情况确定。
由于 checkUserAuth 使用可组合项,这使其成为可组合项,如果需要在已安装的挂钩中使用它,则需要返回一个允许这样做的函数:
或者,
checkUserAuth
不应使用可组合项。useUserStore
没有可组合项固有的限制,并且useRouter
可以替换为路由器实例的导入。