import("../views/HomePage.v"/> import("../views/HomePage.v">
Maison >interface Web >Voir.js >Comment ajouter dynamiquement un routage dans vue3
Initialisez le projet vite + vue + ts et introduisez vue-router.
La structure des répertoires est la suivante. Faites attention à cette redirection 404. Vue3 ne prend pas en charge directement l'utilisation de "*" pour faire correspondre toutes les routes. Vous devez utiliser :catchAll(.*)
. :catchAll(.*)
。
初始化路由:
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;
现在如果去访问vip路由,则会跳转到404页面。
如果需要访问vip页面,那么就需要我们动态地添加vip路由,下面代码实现了vip路由
Itinéraire d'initialisation :
import {useRouter} from "vue-router"; let router = useRouter(); function addRouter(){ router.addRoute( { path: "/vip", component: () => import("../views/VipPage.vue") }) }
Maintenant, si vous accédez à l'itinéraire VIP, vous accéderez à la page 404.
#🎜 🎜#2. Ajouter un itinéraire "vip"
routage VIP<.> Ajouter : </.>
router.addRoute({ name: 'admin', path: '/admin', component: Admin }) router.addRoute('admin', { path: 'settings', component: AdminSettings }) // 这等效于: router.addRoute({ name: 'admin', path: '/admin', component: Admin, children: [{ path: 'settings', component: AdminSettings }], })A ce moment nous accéderons au chemin de routage VIP : #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜## 🎜🎜#Okay Visité avec succès. #🎜🎜##🎜🎜#3. Résumé#🎜🎜##🎜🎜# En utilisant la méthode addRoute de l'objet routeur, vous pouvez ajouter dynamiquement des routes. Parfois, vous pouvez ajouter des itinéraires imbriqués, qui sont des sous-itinéraires. #🎜🎜#rrreee
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!