vue-routeルーティング管理のインストールと設定方法

導入

Vue Router 、 Vue.jsの公式ルーティングマネージャーです。 Vue.jsのコアと深く統合されているため、シングルページアプリケーションを簡単に構築できます。含まれる機能は次のとおりです:

ネストされたルート/ビューテーブル
モジュール式のコンポーネントベースのルーティング構成
ルートパラメータ、クエリ、ワイルドカード
Vue.js トランジションシステムに基づくトランジション効果を表示する
きめ細かなナビゲーションコントロール
自動的にアクティブ化された CSS クラスを持つリンク
HTML5 履歴モードまたはハッシュモード、IE9 では自動的にダウングレードされる
カスタムスクロールバーの動作

インストール

インストールコマンド

npm インストール vue-router --save

モジュールプロジェクトで使用する場合は、 Vue.use()を介してルーティング関数を明示的にインストールする必要があります。

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。

Vue.use(VueRouter)

モジュール使用

以前、スキャフォールディングvue-cliを使用してプロジェクトを作成したとき、 router実際に構成されていました。プロジェクトが作成されると、プロジェクトのルートディレクトリにrouterフォルダーが作成され、 routerの下に次の内容のindex.jsファイルが作成されます。

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

// 1. 他のプラグインを使用する場合は、Vue.use を使用してプラグインをインストールする必要があります Vue.use(VueRouter);

// 2. ルートを定義します。各ルートはコンポーネントにマップする必要があります。constroutes = [
  {
    パス： "/"、
    名前: "ホーム",
    コンポーネント: ホーム、
  },
  {
    パス: "/about",
    名前: "概要",
    コンポーネント: について
  },
];

// 3. ルーターインスタンスを作成する const router = new VueRouter({
  // ルートとコンポーネント間のアプリケーション関係を設定します。ルート、// (省略形) ルートと同等: ルート
});

// 4. ルーター オブジェクトをエクスポートし、main.js で export default router を参照します。

このファイルは、ルーティングを構成するためのものです。最後に、 routerオブジェクトをエクスポートすると、プロジェクトのmain.jsで参照できるようになります。

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

Vue.config で productionTip を false に設定します。

新しいVue({
  router, // vueインスタンスにルーターオブジェクトを追加すると、ルーティングを使用できるようになります render: (h) => h(App),
}).$mount("#app");

当社の 2 つのコンポーネントコードであるAboutとHome次のとおりです。

// About.vue
<テンプレート>
  <div class="about">
    <h1>について</h1>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 「概要」
}
</スクリプト>

<スタイルスコープ>
</スタイル>

// ホーム.vue
<テンプレート>
  <div class="home">
    <h1>ホーム</h1>
  </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
  名前: "ホーム",
};
</スクリプト>

<スタイルスコープ>
</スタイル>

最後に、 App.vueに次のコードを記述します。

テンプレート>
  <div id="アプリ">
    <router-link to="/">ホーム</router-link>
    <router-link to="/about">について</router-link>
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スタイル lang="scss">
</スタイル>

<router-link>を使用してリンクを読み込み、次にto使用してジャンプ先のリンクを表します。最後に、 <router-link> <a>タグにレンダリングされます。
<router-view>はルートの出口です。つまり、対応するurlの下のコードがこの場所にレンダリングされます。

HTML5 履歴モード

しかし、プログラムを起動してページにアクセスすると、 urlアドレスに#が表示されます。

これは、 vue-routerデフォルトでhashモード ( URLのhashを使用して完全なURLをシミュレートする) に設定されているため、 URLが変更されてもページがリロードされないためです。
醜いhashが必要ない場合は、ルーターのhistoryモードを使用できます。このモードでは、 history.pushState API最大限に活用して、ページをリロードせずにURLジャンプを完了します。

const ルーター = 新しい VueRouter({
  モード: '履歴'、
  ルート: [...]
})

routerフォルダーの下のindex.jsのhistoryにmodeを追加し、 #記号なしでhttp://localhost:8080/再度アクセスするだけです。

注: historyモードではバックグラウンド構成のサポートも必要です。私たちのアプリケーションはシングルページクライアントアプリケーションであるため、バックエンドが正しく構成されていない場合、ユーザーがブラウザーで他のurlアドレスに直接アクセスすると 404 が返され、これは好ましくありません。

したがって、すべての状況をカバーするには、サーバー上に候補リソースを追加する必要があります。URL URLどの静的リソースとも一致しない場合は、 app依存するページである同じindex.htmlページを返す必要があります。

vue-route ルーティング管理のインストールと設定に関するこの記事はこれで終わりです。より関連性の高い vue route のインストールと設定の内容については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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