Comment ajouter dynamiquement un routage dans vue3

1. Initialisez le projet

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路由，下面代码实现了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"

Si nous devons accéder à la page VIP, nous devons ajouter dynamiquement le routage VIP Le code suivant implémente le routage VIP<. /code> 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!