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 における相対と絶対の使用法と違いの詳細な説明

推薦する

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...

Docker 実行オプションを使用して Dockerfile の設定を上書きする

通常は、最初に Dockerfile ファイルを定義し、次に docker build コマンドを使...

CSS3はブラウザのスクロールバーのスタイルを変更します

注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...

docker compose の使い方の詳しい説明

目次Docker Compose の使用シナリオ基本的なデモ基本的な操作とメンテナンスdocker-...

React、Angular、Vueの3つの主要なフロントエンド技術の詳細説明

目次1. 反応する基本的な使い方注目すべき機能クラスコンポーネント仮想DOMライフサイクルメソッドJ...

CSS transform-originプロパティを理解する

序文最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花...

Vueカスタム命令とその使用方法の詳細な説明

目次1. 指令とは何ですか? Vue でよく使われる組み込みの v ディレクティブv-if と v-...

カルーセルアニメーションを実現するVueコンポーネント

この記事では、カルーセルアニメーションを実現するためのVueコンポーネントの具体的なコードを例として...

Web プロジェクト開発 VUE の混合と継承の原則

目次ミキシンMixin ノート (重複名)ローカルミックスイングローバル ミックスイン定義とグローバ...

MySQLのデッドロックチェック処理の通常の方法

通常、デッドロックが発生すると、重みが最も小さい接続が強制終了され、ロールバックされます。ただし、最...

docker tagとdocker pushの使い方の詳しい説明

Dockerタグの詳しい説明docker tag コマンドの使い方と、ローカルイメージを daocl...

MySQL DDLステートメントの使用

序文SQL の言語分類には主に以下の種類があります。 DDLデータ定義言語作成、削除、変更データ定義...

Linux での grep コマンドの使い方の詳細な説明

Linux grep コマンドLinux の grep コマンドは、ファイル内の条件を満たす文字列を...

記事では、js を使用して弾幕効果を実現する方法を説明します

目次新しい HTML ファイルを作成します。初期テンプレートを作成するHTML の追加CSS パディ...

tomcat9.exeをクリックするとクラッシュする問題を解決する方法

ある読者から連絡があり、ダウンロードが終了し、操作がまだ開始されていないのに、なぜ Tomcat の...