vue3+TypeScript+vue-routerの使い方

使いやすい

プロジェクトを作成する

vue-cli 作成

$npm インストール -g @vue/cli
$vue --バージョン
@vue/cli 4.5.15
$vue プロジェクトを作成

次に、手順を実行します。

プリセットを選択してください
手動で機能を選択する
プロジェクトに必要な機能を確認する
TypeScriptを選択します。選択するにはスペースバー、続行するには Enter キーを押すことに注意してください。
プロジェクトを開始するVue.jsのバージョンを選択します
3.x (プレビュー) を選択
クラススタイルのコンポーネント構文を使用する
直接入力
TypeScriptとBabelを併用する
直接入力
リンター/フォーマッタ設定を選択する
直接入力
ルーターの履歴モードを使用しますか?
直接入力
リンター/フォーマッタ設定を選択する
直接入力
追加のリント機能を選択する
直接入力
Babel、ESLint などの設定をどこに配置するのがよいでしょうか?
直接入力
これを将来のプロジェクト用のプリセットとして保存しますか?
直接入力

ファイル構造:

私のプロジェクト
babel.config の構文
+--- パッケージロック.json
+--- パッケージ.json
+--- 公開
| +--- ファビコン.ico
| +--- インデックス.html
+--- README.md
+--- 出典
| +--- アプリ.vue
| +--- 資産
| | +--- ロゴ.png
| +--- コンポーネント
| | +--- HelloWorld.vue
| +--- メイン.ts
| +--- shims-vue.d.ts
tsconfig.json は、
+--- ノードモジュール
| +--- ...

エントリファイルはsrc/main.tsです

ヴィートクリエイション

次のコマンドを実行してプロジェクトを作成します

$npm init vite-app <プロジェクト名>
$cd <プロジェクト名>
$ npmインストール
$ npm 実行 dev

ファイル構造:

プロジェクト名
+--- インデックス.html
+--- パッケージロック.json
+--- パッケージ.json
+--- 公開
| +--- ファビコン.ico
+--- 出典
| +--- アプリ.vue
| +--- 資産
| | +--- ロゴ.png
| +--- コンポーネント
| | +--- HelloWorld.vue
| +--- インデックス.css
| +--- メイン.js
+--- ノードモジュール
| +--- ...

エントリファイルはsrc/main.tsです

注意: vite メソッドを使用して作成されたプロジェクトには vue 宣言ファイルがないため、カスタマイズする必要があります。そうしないと、エラーが報告されます。
src/shims-vue.d.ts

 /* eslint を無効にする */
モジュール '*.vue' を宣言します。
  'vue' から DefineComponent 型をインポートします。
  定数コンポーネント: DefineComponent<{}, {}, any>
  デフォルトコンポーネントをエクスポートする
}

vue-routerをインストールする

$ npm インストール vue-router@4

この時点で、 package.json次のようになります。

 {
  "名前": "私のプロジェクト",
  "バージョン": "0.1.0",
  「プライベート」：true、
  「スクリプト」: {
    "サーブ": "vue-cli-service サーブ",
    "ビルド": "vue-cli-service ビルド",
    "lint": "vue-cli-service lint"
  },
  「依存関係」: {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.12"
  },
  「devDependencies」: {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/パーサー": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/コンパイラ-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-プラグイン-vue": "^7.0.0",
    "typescript": "~4.1.5"
  }
}

コンポーネントの作成/変更

src/router/index.tsを作成する

「vue-router」から {createRouter、createWebHashHistory} をインポートします。
 
'../components/Home.vue' から Home をインポートします。
'../components/About.vue' から About をインポートします。
'../components/User.vue' から User をインポートします。
 
定数ルート = [
	// ルーターパラメータの詳細については以下を参照してください {
		パス: "/home",
		名前: "ホーム",
		コンポーネント: ホーム
	},
	{
		パス: "/about",
		名前: "について",
		コンポーネント: について
	},
	{
		パス: "/user/:uid", // 動的パラメータ名: "user",
		コンポーネント: ユーザー
	}
]
エクスポートconst router = createRouter({
	履歴: createWebHashHistory(),
	ルート: ルート
})

コンポーネントを作成する: Home.vue About.vue User.vue

src/components/Home.vue

 <テンプレート>
  <div>ホーム コンポーネント</div>
</テンプレート>
 
<script lang="ts">
「vue」からdefineComponentをインポートします。
 
エクスポートデフォルトdefineComponent({
  名前: "ホーム",
  設定（） {
	戻る {
	  //返されたデータ };
  },
});
</スクリプト>

src/components/About.vue

 <テンプレート>
  <div>コンポーネントについて</div>
</テンプレート>
 
<script lang="ts">
「vue」からdefineComponentをインポートします。
 
エクスポートデフォルトdefineComponent({
  名前: "概要",
  設定（） {
	戻る {
	  //返されたデータ };
  },
});
</スクリプト>

src/components/User.vue

 <テンプレート>
  <div>ユーザー コンポーネント</div>
</テンプレート>
 
<script lang="ts">
「vue」からdefineComponentをインポートします。
 
エクスポートデフォルトdefineComponent({
  名前: "ユーザー",
  設定（） {
	戻る {
	  //返されたデータ };
  },
});
</スクリプト>

App.vueを変更する

<テンプレート>
  <div>{{ アプリメッセージ }}</div>
  <!-- router-link はタグとしてレンダリングされます -->
  <router-link to="/home">ホーム</router-link>
  <router-link to="/about">について</router-link>
  <router-link to="/user/lczmx">ユーザー</router-link>
 
  <!-- ルーティング終了 -->
  <!-- ルートに一致するコンポーネントがここでレンダリングされます -->
  <ルータービュー></ルータービュー>
</テンプレート>
 
<script lang="ts">
「vue」からdefineComponentをインポートします。
 
エクスポートデフォルトdefineComponent({
  名前:「アプリ」、
  設定（） {
	const appMessage = "アプリコンポーネント";
	戻る {
	  //返されたデータ appMessage、
	};
  },
});
</スクリプト>
<スタイル>
/* スタイルを追加 */
＃アプリ {
  テキスト配置: 中央;
  上マージン: 50px;
}
{
  マージン: 30px;
  表示: インラインブロック;
}
</スタイル>

エントリtsを変更する

src/main.tsを変更します:

 'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./index.css' をインポートします
 
'./router' から { router } をインポートします。
 
// アプリケーションを作成し、対応するインスタンスオブジェクトを返します const app = createApp(App)
 
// vue-router プラグインをインストールする app.use(router)
// マウントメソッドを呼び出す app.mount('#app')

Vueを起動

$ npm 実行 サーブ

> [email protected] サーブ
> vue-cli-service サーブ 

 INFO 開発サーバーを起動しています...
CopyPluginを放出した後98%

 完了 6387 ミリ秒でコンパイルに成功しました 午後 4:14:30

  アプリの実行場所:
  - ローカル: http://localhost:8080/
  - ネットワーク: http://192.168.43.12:8080/

  開発ビルドは最適化されていないことに注意してください。
  プロダクションビルドを作成するには、npm run build を実行します。

問題は見つかりませんでした。

ブラウザでアクセス

プロンプトに従って、以下に示すようにhttp://localhost:8080/にアクセスします。

ファイル構造図

包括的な使用

動的パラメータ

/user/lczmxと/user/jackというルートが必要だとします。しかし、これら 2 つのルートに 2 つの異なるコンポーネントを定義することはできません。最善の方法は、動的パラメータを使用することです。

定数ルート = [
  // 動的セグメントはコロンで始まります { path: '/users/:id', component: User },
  // 正規表現 `()` を使用します。内容は前のパスマッチに渡されます。
  // route.params.pathMatch の下の値 { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]

一致すると、パラメータはrouterインスタンスのcurrentRoute.value.paramsにマッピングされます。

vue2の注意: this.$routeとthis.$router setupで使用できないため
入手方法については、私の別のブログ「vue3 は現在のルートを取得します」と公式ウェブサイト「Vue Router と統合 API」を参照してください。

試合リスト

マッチングパターン	一致するパス	現在のルートのパラメータ
`/users/:username`	`/users/eduardo`	`{ username: 'eduardo' }`
`/users/:username/posts/:postId`	`/users/eduardo/posts/123`	`{ username: 'eduardo', postId: '123' }`

パラメータ付きのルートを使用する場合は、次の点に注意してください。同じコンポーネントインスタンスが再利用されるため、コンポーネントライフサイクルフックは呼び出されません。

しかし、ルートを監視することはできる

ウォッチを使用して動的パラメータを監視する

src/components/User.vueを変更します:

 <テンプレート>
  <div>ユーザー コンポーネント</div>
  <p>現在のユーザー: {{ uid }}</p>
 
  <router-link to="/user/lczmx">lczmx</router-link>
  <router-link to="/user/jack">ジャック</router-link>
</テンプレート>
 
<script lang="ts">
「vue」から{defineComponent、watch、ref}をインポートします。
「vue-router」から useRouter をインポートします。
 
エクスポートデフォルトdefineComponent({
  名前: "ユーザー",
  設定（） {
    定数ルーター = useRouter();
    定数 uid = ref(router.currentRoute.value.params.uid);
    時計（
      // 応答のないデータをリッスンする() => router.currentRoute.value,
      (値) => {
        // uid を変更する
        uid.value = val.params.uid;
      }
    );
    戻る {
      // 返されたデータ uid、
    };
  },
});
</スクリプト>

Combination APIを使用して動的パラメータを監視する

https://next.router.vuejs.org/en/guide/advanced/composition-api.html

リダイレクト

以下はrouterのすべてのパラメータを使用します。

定数ルート = [
    {
        パス： "/"、
        // 方法 1: URL をハードコードする
        // リダイレクト: "/home"、// "/" にアクセスすると "/home" にリダイレクトします
 
        // 方法 2: 対応する名前付きルートにジャンプするリダイレクト: { name: "home" },
 
        //メソッド3を書くとメソッドが定義されます //このメソッドは相対パスを返すこともできます/*
        リダイレクト: => {
            // メソッドはターゲットルートをパラメータ「to」として受け取ります
 
            // リダイレクトされた文字列パス/パスオブジェクトを返す			
			// クエリはパラメータを指定します return { path: '/home', query: { q: to.params.searchText } }
        },
        */
    },
    {
        パス: "/home",
        名前: "ホーム",
        コンポーネント: ホーム
    }
]

リダイレクトはナビゲーションガードをトリガーしないことに注意してください

添付は公式サイトからの例です: Named Views - Vue Router 4 の例

命名と別名

名前付きルート

ルートに、 redirectやrouter-linkなど、他のルートでも使用できる名前を付けます。

定数ルート = [
  {
    パス: '/user/:username',
    名前: 'ユーザー',
    コンポーネント: ユーザー
  }
]

redirectの使用方法は上記のとおりで、 router-link次のようになります。

 <テンプレート>
  <div>ユーザー コンポーネント</div>
  <p>現在のユーザー: {{ uid }}</p>
 
  <router-link :to="{ name: 'user', params: { uid: 'lczmx' } }"
    >lczmx</ルーターリンク
  >
  <router-link :to="{ name: 'user', params: { uid: 'jack' } }"
    >ジャック</ルーターリンク
  >
</テンプレート>

router.pushで使用します ( routerはrouterオブジェクトです):

 router.push({ name: 'user', params: { uid: 'lczmx' } })

名前付きビュー

つまり、 router-view名前を定義することで再利用性を実現できます。この機能を利用してサイドバーなどを実装することができます。

例えば

ルートを定義します。

 「vue-router」から {createRouter、createWebHashHistory} をインポートします。
 
'../components/Home.vue' から Home をインポートします。
'../components/About.vue' から About をインポートします。
'../components/User.vue' から User をインポートします。
 
定数ルート = [
	{
		パス： "/"、
		コンポーネント:
			default: Home, // default は Home コンポーネントを使用します a: About, // a は About コンポーネントを使用します b: User, // b は User コンポーネントを使用します },
 
	},
	{
		パス: "/home",
		コンポーネント:
			default: About, // デフォルトで About コンポーネントを使用します a: Home, // a は Home コンポーネントを使用します b: User, // b は User コンポーネントを使用します },
 
	},
]
 
 
エクスポートconst router = createRouter({
	履歴: createWebHashHistory(),
	ルート: ルート
})

App.vueを変更する

<テンプレート>
  <div>{{ アプリメッセージ }}</div>
 
  <!-- router-link はタグとしてレンダリングされます -->
  <router-link to="/">/</router-link>
  <router-link to="/home">/home</router-link>
 
  <!-- ルーティング終了 -->
  <!-- ルートに一致するコンポーネントがここでレンダリングされます -->
  <!-- デフォルト -->
  <ルータービュー></ルータービュー>
  <ルータービュー名="about"></ルータービュー>
  <ルータービュー名="ユーザー"></ルータービュー>
</テンプレート>
 
<script lang="ts">
「vue」からdefineComponentをインポートします。
 
エクスポートデフォルトdefineComponent({
  名前:「アプリ」、
  設定（） {
	const appMessage = "アプリコンポーネント";
	戻る {
	  //返されたデータ appMessage、
	};
  },
});
</スクリプト>
<スタイル>
/* スタイルを追加 */
＃アプリ {
  テキスト配置: 中央;
  上マージン: 50px;
}
{
  マージン: 30px;
  表示: インラインブロック;
}
</スタイル>

その他のコンポーネント
About.vue :

 <テンプレート>
  <div>コンポーネントについて</div>
</テンプレート>

Home.vue :

 <テンプレート>
  <div>ホーム コンポーネント</div>
</テンプレート>

User.vue

 <テンプレート>
  <div>ユーザー コンポーネント</div>
</テンプレート>

サービスを開始してvueにアクセスする

図示のとおり:

ビュー名を指定しない場合は、 defaultの

エイリアス

異なるURLが同じルートにアクセスする効果を実現できる

定数ルート = [
    // 「/home」または「/」にアクセスできます
    // アクセスパスは変更されません{
        パス: "/home",
        名前: "ホーム",
        コンポーネント: ホーム、
        エイリアス: "/"
    }

ネストされたルート

以前は、 App.vueでrouter-viewを定義して、他のコンポーネントをそこにレンダリングできるようにしました。

しかし、他のコンポーネントでレンダリングする必要がある場合は、ネストされたルーティングが必要です

外部router定義と同様に、値がルートデータであるルートをネストするには、 childrenを使用します。

例：

router.index.ts

 「vue-router」から {createRouter、createWebHashHistory} をインポートします。
 
'../components/Home.vue' から Home をインポートします。
'../components/About.vue' から About をインポートします。
'../components/User.vue' から User をインポートします。
'../components/UserHome.vue' から UserHome をインポートします。
'../components/UserSettings.vue' から UserSettings をインポートします。
'../components/UserProfile.vue' から UserProfile をインポートします。
 
定数ルート = [
	// 「/home」または「/」にアクセスできます
	// アクセスパスは変更されません {
		パス: "/home",
		名前: "ホーム",
		コンポーネント: ホーム、
		エイリアス: "/"
	},
	{
		パス: "/about",
		名前: "について",
		コンポーネント: について
	},
	{
		パス: "/user/:uid", // 動的パラメータ名: "user",
		コンポーネント: User, // ルータビューレンダリングにネストされたルータ children: [
			// /user/lczmxのようなURLにマッチする
			{ パス: "", コンポーネント: UserHome },
 
			// /user/lczmx/settingsのようなURLに一致します
			{ パス: "settings"、コンポーネント: UserSettings、名前: "user-settings" },
 
			// /user/lczmx/profile のような URL に一致します
			{ パス: "profile"、コンポーネント: UserProfile、名前: "user-profile" }
		]
	}
]
 
 
エクスポートconst router = createRouter({
	履歴: createWebHashHistory(),
	ルート: ルート
})

注意: childrenにpath: ""がない場合、 /user/lczmxにアクセスすると空白ページのみが表示されます。

User.vue

 <テンプレート>
  <div>
	<router-link :to="{ name: 'user-settings' }">設定</router-link>
	<router-link :to="{ name: 'user-profile' }">プロファイル</router-link>
  </div>
 
  <ルータービュー></ルータービュー>
</テンプレート>

UserHome.vue

 <テンプレート>
  <div>ユーザーホームページ</div>
</テンプレート>

UserProfile.vue

 <テンプレート>
  <div>ユーザー詳細ページ</div>
</テンプレート>

UserSettings.vue

 <テンプレート>
  <div>ユーザー設定ページ</div>
</テンプレート>

開始とアクセス

ブラウザでテスト:

プログラムによるルーティング

つまり、 a タグを使用する代わりに、 js/tsを通じてルートを変更します。原理は、vue3 のhistoryスタックに新しいレコードを追加することです。記述方法には次のものがあります。

 <テンプレート>
  <div>コンポーネントについて</div>
  <button @click="changeRouter">ルートを変更</button>
</テンプレート>
 
 
<script lang="ts">
「vue」からdefineComponentをインポートします。
 
「vue-router」から useRouter をインポートします。
 
エクスポートデフォルトdefineComponent({
  名前: "概要",
  設定（） {
    // ルーターオブジェクトを取得します。const router = useRouter();
 
    定数changeRouter = () => {
      /* ルートを変更する例 */
 
      // 1 つの文字列パス router.push("/users/lczmx");
 
      // パスを持つ 2 つのオブジェクト router.push({ path: "/users/lczmx" });
 
      // 3 つの名前付きルートと、ルートが URL を構築できるようにするためのパラメータを追加しました
      router.push({ name: "user", params: { username: "lczmx" } });
 
      // 4 クエリパラメータ付きの場合、結果は /register?plan=private になります
      router.push({ パス: "/register", クエリ: { プラン: "private" } });
 
      // 5 ハッシュの場合、結果は /about#team になります
      router.push({ パス: "/about", ハッシュ: "#team" });
 
      // 6 URL は手動で構築できますが、エンコードは自分で処理する必要があります。const username = "lczmx";
      router.push(`/user/${username}`); // -> /user/lczmx
      // 同様に router.push({ path: `/user/${username}` }); // -> /user/lczmx
      // 可能であれば、自動 URL エンコードのメリットを享受するために `name` と `params` を使用します router.push({ name: "user", params: { username } }); // -> /user/lczmx
 
      // 7 `params` は `path` と一緒に使用できません。そうしないと `params` は無視されます router.push({ path: "/user", params: { username } }); // -> /user
 
      // 8 replace は true であり、履歴に追加されません router.push({ path: "/home", replace: true });
      // router.replace({ path: "/home" }); と同等
 
      // 9 履歴全体 // 1レコード前進します。router.forward() と同じです。router.go(1);
      // router.back() と同じレコードを返します router.go(-1);
      // 3レコード進む router.go(3);
      // レコード数がそれほど多くない場合は、何も表示せずに失敗します router.go(-100);
      ルータ.go(100);
    };
    戻る {
      //返されたデータ changeRouter、
    };
  },
});
</スクリプト>
 
<スタイル>
ボタン {
  マージン: 30px;
}
</スタイル>