この記事では、Vue Router4 の優れた機能を紹介します。

この記事では、Vue Router4 の優れた機能について説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#Vue Router 4 がリリースされました。新しいバージョンにはどのような優れた機能が含まれているかを見てみましょう。 [関連する推奨事項: "vue.js チュートリアル"]

Vue3 は

Vue 3 をサポートし、createApp API を導入します, この API は、プラグインを Vue インスタンスに追加する方法を変更します。したがって、以前のバージョンの Vue Router は Vue3 と互換性がありません。

Vue Router 4 には、Vue3 にインストールできるルーター インスタンスを作成する createRouter API が導入されています。

// src/router/index.js

import { createRouter } from "vue-router";

export default createRouter({
  routes: [...],
});

// src/main.js

import { createApp } from "vue";
import router from "./router";

const app = createApp({});
app.use(router);
app.mount("#app");

履歴オプション

Vue Router の以前のバージョンでは、mode 属性を使用してルーティングのモードを指定できました。

hash モードでは、URL ハッシュを使用して完全な URL をシミュレートし、URL が変更されたときにページがリロードされないようにします。 history モードは、HTML5 History API を使用して、ページをリロードせずに URL ナビゲーションを実装します。

// Vue Router 3
const router = new VueRouter({
  mode: "history",
  routes: [...]
});

Vue Router 4 では、これらのパターンはモジュールに抽象化されており、インポートして新しい history オプションに割り当てることができます。このさらなる柔軟性により、必要に応じてルーターをカスタマイズできます。

// Vue Router 4
import { createRouter, createWebHistory } from "vue-router";

export default createRouter({
  history: createWebHistory(),
  routes: [],
});

動的ルーティング

Vue Router 4 は、動的ルーティングを実装するための addRoute メソッドを提供します。

この方法はめったに使用されませんが、興味深い使用例がいくつかあります。たとえば、ファイル システム アプリケーションの UI を作成し、パスを動的に追加したいとします。次のように実行できます:

methods: {
  uploadComplete (id) {
    router.addRoute({
      path: `/uploads/${id}`,
      name: `upload-${id}`,
      component: FileInfo
    });
  }
}

次の関連メソッドも使用できます:

• removeRoute
• hasRoute
• getRoutes

ナビゲーション ガードは next

以外の値を返すことができます。ナビゲーション ガードは Vue Router のフックであり、ユーザーが前または前にカスタマイズを実行できるようにします。ジャンプ後のロジック (beforeEach、beforeRouterEnter など)

これらは通常、ユーザーがページにアクセスする権限を持っているかどうかを確認したり、動的ルーティング パラメーターを検証したり、リスナーを破棄したりするために使用されます。

バージョン 4 では、フック メソッドから値または Promise を返すことができます。これにより、次の操作を迅速かつ簡単に実行できるようになります。

// Vue Router 3
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) {
    next(false);
  }
  else { 
    next();
  }
})

// Vue Router 4
router.beforeEach(() => isAuthenticated);

これらは、バージョン 4 で追加された新機能のほんの一部です。詳細については、公式 Web サイト にアクセスしてください。

英語の元のアドレス: https://vuejsdevelopers.com/topics/vue-router/

著者: Matt Maribojoc

その他のプログラミング関連知識については、プログラミング ビデオ をご覧ください。 ！

以上がこの記事では、Vue Router4 の優れた機能を紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。