vue3 vue-routerの使い方の詳しい説明

1 はじめに

Vueシングルページアプリケーションの構築に最適です。このようなアプリケーションのほとんどでは、公式にサポートされているアプリケーションを使用することをお勧めしますVue Router。シングルページアプリケーションでは、クライアント側 JavaScript がページジャンプリクエストをインターセプトし、新しいデータを動的に取得し、以下の現在のページを更新せずにリロードできます。このようなシナリオではユーザーは長期間にわたって複数回対話することが多いため、通常、これによりユーザーエクスペリエンスがよりスムーズになります。このタイプのシングルページアプリケーションでは、ルーティングの更新はクライアント側で実行されます。

Vue RouterVueの正規ルートです。Vue.js コアと深く統合されているため、Vue.js を使用して単一ページのアプリケーションを簡単に構築できます。特徴は次のとおりです。

ネストされたルートマップ
動的ルーティング
モジュール式のコンポーネントベースのルーティング構成
ルーティングパラメータ、クエリ、ワイルドカード
Vue.js のトランジションシステムによって提供されるトランジション効果を示します。
詳細なナビゲーション制御
CSS クラスリンクを自動的にアクティブ化する
HTML5 ヒストリーモードまたはハッシュモード
カスタマイズ可能なスクロール動作
URLの正しいエンコード

Vue Routerここでは基本的な使い方を紹介します。

2 Vueルーターの使用

2.1 インストール

vue3 の場合は、vue-router 4.x 以降を使用することをお勧めします。ノード環境は次のようにインストールされます。

npm install vue-router@4

2.2 はじめに

当社のエンジニアリングプロジェクトでは、通常、その後の使用とメンテナンスを容易にするために、ルーティングファイルを個別に管理する必要があります。これに基づいて、紹介は 2 つのステップに分かれています。

一元管理ルーティングエントリファイルの作成
vue プロジェクトでは、ルーティングエントリファイルの使用が導入されています。

2.2.1 ルーティングファイルの作成

main.ts ファイルと同じディレクトリに router フォルダーを作成し、index.ts ファイルを追加します (ts を使用します。js についても同様です)。

ファイルの内容は次のとおりです。

import {
    
     createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
// 项目其他页面路由（推荐使用）
import Practice from "../router/practiceFolder/practice";

// vue项目自带路由
const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: "/",
    name: "Home",
    component: Home
  },
  {
    
    
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const routers = [...routes, ...Practice];

const router = createRouter({
    
    
  history: createWebHistory(process.env.BASE_URL),
  routes: [...routes, ...Practice]
});

export default router;

このうち、それを使用して宣言されたオブジェクトはRouteRecordRawルーティングオブジェクトとみなされ、ルーティングオブジェクトプールに入れられます。

createRouterルートを作成します。

createWebHistoryHTML5 モードでのルーティングを表します。これは推奨モードでもあります。

2.2.2 main.ts の概要

コードは以下のように表示されます。

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


createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

2.3 使用方法

2.3.1 ルータービューの使用

ログイン後、app.vue構成で単一ページのアプリケーションを使用してrouter-viewページを切り替えることができます。コードは次のとおりです。

<template>
  <router-view v-slot="{ Component }">
  </router-view>
</template>

導入後は、Vue インスタンスで$routerルーティングインスタンスにアクセスできるようになります。別の URL に移動したい場合は、を使用してthis.$router.push(...)ジャンプします。

詳しい使用方法は、「vue router-view 使用方法の詳細」router-viewで確認できます。

2.3.2 ルーターリンクの使用

を使用する場合、このメソッドは<router-link>内部で呼び出されるため、クリックすることは呼び出しと同じです。router.push(...)<router-link :to="...">router.push(...)

2.3.3`setup`アクセスルーティングと現在のルーティング

setup内部にアクセスできないため、またはにthis直接アクセスできなくなります。代わりに、および関数を使用します。this.$routerthis.$routeuseRouteruseRoute

import {
    
     useRouter, useRoute } from 'vue-router'

export default {
    
    
  setup() {
    
    
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
    
    
      router.push({
    
    
        name: 'about',
        query: {
    
    
          ...route.query,
        },
      })
    }
  },
}

2.4 その他の API

上記で紹介したVue Router基本的な APIに加えて、次の API が利用可能です。

NavigationFailureType : ナビゲーション失敗のタイプ
START_LOCATION : デフォルトの開始場所
createMemoryHistory : メモリ履歴モードを使用します。
createRouterMatcher :
createWebHashHistory : ハッシュパターンを作成する
createWebHistory : html5 モードを作成します
isNavigationFailure : ナビゲーションが失敗したかどうか
onBeforeRouteLeave : セットアップで使用されるナビゲーションガード。現在の位置にあるコンポーネントが出発しようとしているときにトリガーされます。
onBeforeRouteUpdate : ナビゲーションガード。セットアップで使用され、現在の場所が更新されようとしているときにトリガーされます。
parseQuery : クエリパラメータを解析します
stringifyQuery : 文字列クエリパラメータ
useLink : RouterLink の内部動作を構成可能な API 関数として公開します。
useRoute : this.$route を置き換えます
useRouter : this.$router を置き換えます

この記事では、vue3 ルーティング設定の実際の操作については公式 Web サイトを参照していますが、より包括的な使用方法については、公式 Web サイトのvue routerを参照してください。