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

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

青灯夜游

リリース： 2021-06-04 19:27:14

転載

2661 人が閲覧しました

この記事では、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 サイトにアクセスしてください。