vue3で動的にルーティングを追加する方法

1. プロジェクトの初期化

vite vue ts プロジェクトを初期化し、vue-router を導入します。
ディレクトリ構造は次のとおりです。この 404 リダイレクトに注意してください。Vue3 では、すべてのルートと一致するために "*" を直接使用することはサポートされていません。: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 ページにジャンプします。

2. "vip" ルートの追加

vip ページにアクセスする必要がある場合は、vip ルートを動的に追加する必要があります。次のコードはitvip routing追加:

import {useRouter} from "vue-router";
let router = useRouter();
function addRouter(){
  router.addRoute(  {
    path: "/vip",
    component: () => import("../views/VipPage.vue")
  })
}

この時点で、vip ルーティング パスにアクセスします:

正常にアクセスできます。

3. 概要

ルーターオブジェクトのaddRouteメソッドを使用することで、動的にルートを追加することができます。場合によっては、サブルートであるネストされたルートを追加することもあります。

rree

以上がvue3で動的にルーティングを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。