ホームページ > ウェブフロントエンド > Vue.js > vue3で動的にルーティングを追加する方法

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

WBOY
リリース: 2023-05-17 23:22:16
転載
3819 人が閲覧しました

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

vite vue ts プロジェクトを初期化し、vue-router を導入します。
ディレクトリ構造は次のとおりです。この 404 リダイレクトに注意してください。Vue3 では、すべてのルートと一致するために "*" を直接使用することはサポートされていません。:catchAll(.*) を使用する必要があります。

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 ページにジャンプします。

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

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 ルーティング パスにアクセスします:

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

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

3. 概要

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

rree

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

関連ラベル:
ソース:yisu.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート