import("../views/HomePage.v"/> import("../views/HomePage.v">

Maison  >  Article  >  interface Web  >  Comment ajouter dynamiquement un routage dans vue3

Comment ajouter dynamiquement un routage dans vue3

WBOY
WBOYavant
2023-05-17 23:22:163773parcourir

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(.*)

Comment ajouter dynamiquement un routage dans vue3

初始化路由:

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页面。

Comment ajouter dynamiquement un routage dans vue3

二、添加“vip”路由

如果需要访问vip页面,那么就需要我们动态地添加vip路由,下面代码实现了vip路由

Comment ajouter dynamiquement un routage dans vue3 #🎜 🎜#

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. Comment ajouter dynamiquement un routage dans vue3

Comment ajouter dynamiquement un routage dans vue3 #🎜 🎜#

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<.> Ajouter : </.>

router.addRoute({ name: &#39;admin&#39;, path: &#39;/admin&#39;, component: Admin })
router.addRoute(&#39;admin&#39;, { path: &#39;settings&#39;, component: AdminSettings })

// 这等效于:
router.addRoute({
  name: &#39;admin&#39;,
  path: &#39;/admin&#39;,
  component: Admin,
  children: [{ path: &#39;settings&#39;, 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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer