Saya mahu menggunakan useRoute
dalam komponen saya yang dipanggil dalam cangkuk onMounted.
Sesuatu yang serupa
import { checkUserAuth } from '@/common/CheckUserAuth' onMounted(async () => { await checkUserAuth() })
CheckUserAuth.ts ialah:
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 }) }
Saya tidak faham mengapa penghala semakin tidak ditentukan di mana-mana, adakah ada cara untuk membetulkannya tanpa memberikan penghala sebagai parameter? (Saya mahu merangkum sepenuhnya fungsi checkUserAuth)
Saya tahu saya boleh memperbaikinya
const router = useRouter() onMounted(async () => { await checkUserAuth(router) }) export const checkUserAuth = async (router: Router) => { await router.push({ name: DASHBOARD_ROUTE }) }
Tetapi ini bukan penyelesaian yang baik
useRouter's API mesti dipanggil dalam persediaan, seperti yang dinyatakan dalam dokumentasi rasmi. Anda boleh melihat ini dalam https://router.vuejs.org/zh/api/#userouter (disebut dalam dokumentasi zh). Mungkin anda boleh menulis kod seperti ini:
dan panggilnya dalam tetapan:
Semoga membantu.
Bahan kompos harus digunakan terus dalam tetapan melainkan pelaksanaannya membenarkan penggunaan lain, yang perlu ditentukan berdasarkan kes demi kes.
Memandangkan checkUserAuth menggunakan composable, yang menjadikannya composable, jika anda perlu menggunakannya dalam cangkuk yang dipasang, anda perlu mengembalikan fungsi yang membenarkan ini:
Sebagai alternatif,
checkUserAuth
不应使用可组合项。useUserStore
没有可组合项固有的限制,并且useRouter
boleh digantikan dengan import contoh penghala.