vue3+TypeScript+vue-routerの使い方

vue3+TypeScript+vue-routerの使い方

使いやすい

プロジェクトを作成する

vue-cli 作成

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

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

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

ファイル構造:

私のプロジェクト
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;
}
</スタイル>

詳細については、vue-router4 の公式サイトをご覧ください: Vue Router

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3 + TypeScript 開発の概要
  • Vue3とTypeScriptを組み合わせたプロジェクト開発の実践記録
  • TypeScript を使用して Vue3 で axios をカプセル化する詳細な例
  • Vue3 TypeScriptはuseRequestの詳細を実装します

<<:  JavaScript におけるブラウザ互換性の問題について簡単に説明します

>>:  HTML における相対と絶対の使用法と違いの詳細な説明

推薦する

リンク使用時にハイパーリンクがジャンプしないようにする方法

<a href="" onclick=""> を...

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例サーバー開発を行う際には、...

JS にこれがあるのはなぜですか?

目次1. 需要2. 解決策3. 最初の改善4.砂糖を加える5. 理解不能6. 問題点7. オブジェク...

表示または可視性によってHTML要素を非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

Linux デバイスに空き容量がありません inode の満杯により 500 エラーが発生します

iノードとは何ですか? inode を理解するには、まずファイル ストレージから始める必要があります...

DockerでRedashの中国語版をデプロイしてインストールする方法の詳細な説明

1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...

JavaScript で知らない Object.entries の使い方

目次序文1. 共通オブジェクトを反復処理するには for...of を使用します2. 通常のオブジェ...

インスピレーションを得るための7つのクールなダイナミックウェブサイトデザイン

デザインの分野では、毎年さまざまなデザインのトレンドや流行があります。たとえば、近年のレスポンシブデ...

サイバーパンクスタイルのボタンを実現するためのHTML+CSS

まず効果を見てみましょう: 序文：このアイデアは、Bilibili のアップロード者 Steven ...

CSS3 は下部に固定されたフッターを実装します (ページの高さに関係なく常に下部にあります)

序文フッター領域を下部に固定します。ページの高さや幅に関係なく、モバイル メニューと同様に、フッター...

docker ベースで Prometheus+Grafana を構築する手順の詳細説明

1. プロメテウスの紹介Prometheus は、もともと SoundCloud によって開発された...

Win10 VM 仮想マシンに Mac OS10.14 を完璧にインストールする (グラフィック チュートリアル)

最近、Apple の記者会見を見てとても興奮したので、Mac システムを体験して Apple の素晴...

Ubuntu 18.04 に Anaconda3 をインストールするための詳細なチュートリアル

Anaconda は、conda、Python、およびそれらの依存関係など、180 を超える科学パッ...

MySql8.0.19 インストールピットレコードを共有する

前回の記事ではMySql8.0.19のインストール手順を紹介しました。必要な方はクリックしてご覧くだ...

JavaScript 以外の静的リソースのバンドルの詳細

目次1. パッケージングツールでのカスタムインポート2. ブラウザとバンドラの共通インポート構文3....