Heim > Web-Frontend > View.js > So fügen Sie Routing in vue3 dynamisch hinzu

So fügen Sie Routing in vue3 dynamisch hinzu

WBOY
Freigeben: 2023-05-17 23:22:16
nach vorne
3819 Leute haben es durchsucht

1. Initialisieren Sie das Projekt

Initialisieren Sie das Vite + Vue + TS-Projekt und führen Sie Vue-Router ein.
Die Verzeichnisstruktur ist wie folgt. Beachten Sie, dass Vue3 die direkte Verwendung von „*“ nicht unterstützt. Sie müssen :catchAll(.*) verwenden. :catchAll(.*)

So fügen Sie Routing in vue3 dynamisch hinzu

初始化路由:

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;
Nach dem Login kopieren

现在如果去访问vip路由,则会跳转到404页面。

So fügen Sie Routing in vue3 dynamisch hinzu

二、添加“vip”路由

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

So fügen Sie Routen dynamisch in vue3 hinzu

Initialisierungsrouting:

import {useRouter} from "vue-router";
let router = useRouter();
function addRouter(){
  router.addRoute(  {
    path: "/vip",
    component: () => import("../views/VipPage.vue")
  })
}
Nach dem Login kopieren
So fügen Sie Routing in vue3 dynamisch hinzuWenn Sie jetzt auf die VIP-Route zugreifen, werden Sie zur 404-Seite weitergeleitet.

So fügen Sie Routen in vue3 dynamisch hinzu

2. Hinzufügen „ vip" Route

Wenn wir auf die VIP-Seite zugreifen müssen, müssen wir die VIP-Route dynamisch hinzufügen. Der folgende Code implementiert den Zusatz vip route:

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 }],
})
Nach dem Login kopieren
🎜🎜Zu diesem Zeitpunkt greifen wir zu Der VIP-Routenpfad: 🎜🎜 🎜🎜🎜🎜Kann erfolgreich aufgerufen werden. 🎜🎜3. Zusammenfassung🎜🎜Mit der addRoute-Methode des Router-Objekts können Sie Routen dynamisch hinzufügen. Manchmal können Sie verschachtelte Routen hinzufügen, bei denen es sich um Unterrouten handelt. 🎜rrreee

Das obige ist der detaillierte Inhalt vonSo fügen Sie Routing in vue3 dynamisch hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:yisu.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage