Vue3ルーティングVueRouter4を使用する簡単な例

ルーティング

vue-router4 では API の大部分は変更されていないため、変更点のみに焦点を当てる必要があります。

インストール

糸を追加 vue-router@4

導入

カナダ

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.cjs.js"></script>

使用

ルータ

「vue-router」から createRouter、createWebHistory をインポートします。

「./views/Home.vue」から Home をインポートします。

定数ルート = [
  { パス: "/", コンポーネント: ホーム },
  { パス: "/about", コンポーネント: () => import("./views/About.vue") }
];

const ルーター = createRouter({
  履歴: createWebHistory(),
  ルート
});

デフォルトルーターをエクスポートします。

メイン.js

「vue」から createApp をインポートします。
「./App.vue」からアプリをインポートします。
「./router」からルーターをインポートします。

const app = createApp(App);
app.use(ルーター);
app.mount("#app");

アプリ.vue

<テンプレート>
  <h1>こんにちはアプリ!</h1>
  <p>
    <router-link to="/">ホームへ移動</router-link>
    <router-link to="/about">About へ移動</router-link>
  </p>
  <ルータービュー></ルータービュー>
</テンプレート>

<スクリプト>
デフォルトをエクスポートします {};
</スクリプト>

ちょっとしたヒント

App.vue テンプレートに <router-view></router-view> のみが含まれている場合は、<router-view> を index.html に直接配置できます。

例えば：

インデックス.html

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <link rel="icon" href="/favicon.ico" rel="外部 nofollow" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>Vite アプリ</title>
  </head>
  <本文>
    <div id="アプリ">
      <ルータービュー></ルータービュー>
    </div>
    <script type="module" src="/src/main.js"></script>
  </本文>
</html>

次にmain.jsのApp.vueを削除します。

メイン.js

「vue」から createApp をインポートします。
// 「./App.vue」からアプリをインポートします。
「./router」からルーターをインポートします。

// const app = createApp(App);
定数アプリ = createApp({});
app.use(ルーター);
app.mount("#app");

仕上げる！ 😀便利で使いやすい

要約する

ルーティング VueRouter4 を使用した Vue3 に関するこの記事はこれで終わりです。ルーティング VueRouter4 を使用した Vue3 に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: