Mulakan projek vite + vue + ts dan perkenalkan vue-router.
Struktur direktori adalah seperti berikut. Perhatikan ubah hala 404 ini tidak menyokong secara langsung menggunakan "*" untuk memadankan semua laluan Anda mesti menggunakan :catchAll(.*)
.
Laluan permulaan:
import {createRouter, createWebHashHistory} from "vue-router"; const routes = [ { path: "/", component: () => import("../views/HomePage.vue") }, { path: "/404", component: () => import("../views/ErrorPage.vue") }, { path: "/:catchAll(.*)", // 不识别的path自动匹配404 redirect: '/404', }, ] const router=createRouter({ history: createWebHashHistory(), routes }) export default router;
Kini jika anda mengakses laluan vip, anda akan melompat ke halaman 404.
Jika kita perlu mengakses halaman vip, kita perlu menambah laluan vip secara dinamik melaksanakan ini vip路由
Tambah:
import {useRouter} from "vue-router"; let router = useRouter(); function addRouter(){ router.addRoute( { path: "/vip", component: () => import("../views/VipPage.vue") }) }
Pada masa ini, kita boleh mengakses laluan penghalaan vip:
boleh diakses dengan jayanya.
Dengan menggunakan kaedah addRoute objek penghala, anda boleh menambah laluan secara dinamik. Kadangkala anda boleh menambah laluan bersarang, yang merupakan sub-laluan.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk menambah penghalaan secara dinamik dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!