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 ページにジャンプします。
vip ページにアクセスする必要がある場合は、vip ルートを動的に追加する必要があります。次のコードはitvip routing
追加:
import {useRouter} from "vue-router"; let router = useRouter(); function addRouter(){ router.addRoute( { path: "/vip", component: () => import("../views/VipPage.vue") }) }
この時点で、vip ルーティング パスにアクセスします:
正常にアクセスできます。
ルーターオブジェクトのaddRouteメソッドを使用することで、動的にルートを追加することができます。場合によっては、サブルートであるネストされたルートを追加することもあります。
rree以上がvue3で動的にルーティングを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。