Vue ルーター vue-router 詳細説明ガイド

Vue ルーター vue-router 詳細説明ガイド

中国語ドキュメント: https://router.vuejs.org/zh/

Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js のコアと深く統合されているため、シングルページ アプリケーションを簡単に構築できます。ルーティングは実際にはポインティングとして理解できます。つまり、ページ上のボタンをクリックすると、対応するページにジャンプする必要があり、これがルーティング ジャンプです。

まず、3 つの単語 (route、routes、router) を学びましょう。

  • ルート: まず、これは単数形でルートを意味します。つまり、単一のルートまたは特定のルートとして理解できます。
  • ルート: これは複数形です。つまり、複数のセットを表す場合にのみ複数形になります。つまり、複数のルートのコレクションとして理解できます。JS では、複数の異なる状態を表すコレクションの形式は、配列とオブジェクトの 2 つだけです。実際、ルートの公式定義は配列です。したがって、ルートは複数の配列のコレクションを表すことを覚えておいてください。
  • router: ルーターと翻訳され、上記はすべてルートです。これはルーターであり、上記 2 つを含むコンテナー、または上記 2 つを管理するマネージャーとして理解できます。一般的なシナリオを例に挙げてみましょう。ユーザーがページ上のボタンをクリックすると、ルーターはルート内でルートを検索します。つまり、ルーターはルート コレクション内で対応するルートを検索します。

小さなデモを見てみましょう (記事は少し長いので、辛抱強く読んでください。ゆっくり学習することでのみ、早く進歩することができます。もちろん、一緒に読みながら入力することもできます)。

まず、vue開発環境を構築するためにvue-cliをインストールする必要があります(ここではインストール方法は説明しません。Baiduにアクセスしてください。この問題を自分で解決できない場合は、以下の知識はあまり役に立たないかもしれません)

vue-cli をインストールすると、プロジェクト ディレクトリ構造は次のようになります。

次に、コマンドラインに npm install vue-router -g と入力して、vue-router をインストールします。インストール後、package.json ファイルを開くと、vue-router のバージョン番号を確認できます。

この時点で準備は完了し、デモを作成する準備が整いました。

src ディレクトリに、page1.vue、page2.vue、router.js という 3 つの新しいファイルを作成します。

ページ1.vue:

<テンプレート>
    <div>
        <h1>ページ1</h1>
        <p>{{メッセージ}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ () {
            戻る {
                メッセージ: 「私はページ1コンポーネントです」
            }
        }
    }
</スクリプト>

ページ2.vue:

<テンプレート>
    <div>
        <h1>ページ2</h1>
        <p>{{メッセージ}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ () {
            戻る {
                メッセージ: 「私はページ2のコンポーネントです」
            }
        }
    }
</スクリプト>

ルータ

//Vue の紹介
'vue' から Vue をインポートします。
//vue-routerを導入する
'vue-router' から VueRouter をインポートします。
//サードパーティのライブラリは、使用する前に使用する必要があります Vue.use(VueRouter)
//参照ページ1 import page1 from './page1.vue';
//page2 を参照 import page2 from './page2.vue';

//ルートのコレクションを定義します。配列型 constroutes=[
    //単一ルートはすべてオブジェクト型で、パスはパスを表し、コンポーネントはコンポーネントを表します {path:'/page1',component:page1},
    {パス:"/page2",コンポーネント:page2}
]

//VueRouter をインスタンス化してルートを追加します const router = new VueRouter({
//ES6 の略語、ルートと同じ: ルート
    ルート
});

// このインスタンス オブジェクトをスローして、外部からの読み取りとアクセスを容易にし、デフォルト ルータをエクスポートします。

ここでmain.jsを変更します

'vue' から Vue をインポートします
'./App' から App をインポートします
// router.js を参照
'./router.js' からルーターをインポートします。
Vue.config.productionTip = false

/* eslint を無効にする no-new */
新しいVue({
  el: '#app',
//vueルーターのインスタンスオブジェクトに注入する必要があります。
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
})

App.vue を変更する

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
    <div>
//Router-link はページのクリックトリガー部分を定義します <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">ページ2</router-link>
    </div>
//router-view はページの表示部分を定義します <router-view></router-view>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

<スタイル>
#アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

このように、私たちのページではルーティングジャンプと切り替えを実行でき、ルーティングの基本的な使用は完了しています。ただし、初めて入力したときにルーティングページが表示されないという問題があります。これは、デフォルト値を設定していないためです。最初に入力したときのパスは空なので、次のように解決できます。

ルータ

'vue' から Vue をインポートします。
'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter)
'./page1.vue' から page1 をインポートします。
'./page2.vue' から page2 をインポートします。
'./user.vue' からユーザーをインポートします。

定数ルート = [
    {パス:'/page1',コンポーネント:page1},
    {パス:"/page2",コンポーネント:page2},
    // リダイレクトを設定できます {path:'',redirect:"page1"}
    //または、空のパスでルートを書き換えます {path:"",component:page1}
]

const ルーター = 新しい VueRouter({
    ルート
});

デフォルトルーターをエクスポートする

上記の両方の解決策は解決できます。リダイレクトを構成すると、一致するパスが空の場合にページ 1 にリダイレクトされ、ページ 1 のルートが実行されます。または、ルートを再構成して、パスが空の場合に router-view にページ 1 のページが表示されます。

リダイレクトを使用することとルーティングを個別に構成することの違い:

リダイレクトとは、実際には、一致するパスが条件を満たしている場合に、対応するルートを実行することを意味します。もちろん、このときの URL 上のアドレスは対応するルートを示しており、ページも対応するルートのページです。

パスが条件に一致した場合にルートを再設定します。ルータビューのページ表示部分は、条件に一致したページを表示する役割を担っています。実際には URL は変わりません。

基本的なルーティングでは実現できない複雑な状況がいくつかあります。引き続き見ていきましょう。

動的ルートマッチング:

実際、私たちの生活の中にはそのような例がたくさんあります。あなたはそれに気づいたことがありますか?たとえば、Web サイトやバックエンド管理システムでは、ログイン後に「ようこそ」や「XXX」などのプロンプトが表示されるのが一般的です。この効果は、動的ルーティングを通じて実現できます。

まず、src ディレクトリに新しい user.vue ファイルを作成します。

<テンプレート>
    <div>
        <h1>ユーザー</h1>
       //ここでは、$route.params.name を通じてルート パラメータを取得できます<p>ようこそ、{{$route.params.name}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ () {
            戻る {
                メッセージ: 「私はページ1コンポーネントです」
            }
        }
    }
</スクリプト>

次に、App.vue ファイルのコードを変更します。

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">ページ1</router-link>
      <router-link to="/page2">ページ2</router-link>
    </div>

// 2 つの router-link タグを追加します <div>
      <router-link to="/user/xianyu">ダイナミックルーティング Xianyu</router-link>
      <router-link to="/user/mengxiang">ダイナミックルーティングの夢</router-link>
    </div>
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

<スタイル>
#アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

router.jsを変更する

'vue' から Vue をインポートします。
'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter)
'./page1.vue' から page1 をインポートします。
'./page2.vue' から page2 をインポートします。
'./user.vue' からユーザーをインポートします。

定数ルート = [
    {パス:'/page1',コンポーネント:page1},
    {パス:"/page2",コンポーネント:page2},
    // {パス:'',リダイレクト:"ページ1"}
    {パス:"",コンポーネント:ページ1},
 //コロン記号を使用します。一致すると、パラメータ値は this.$route.params {path:"/user/:name",component:user} に設定されます。
    
]

const ルーター = 新しい VueRouter({
    ルート
});

デフォルトルーターをエクスポートする

設定後は、問題なく正常に動作します。効果を見てみましょう。

動的なルート マッチングは、ルートを設定することでページの部分的な変更の効果を実現し、ユーザーに複数のページがあるという感覚を与えることができるので便利です。クールじゃないですか! ! !

これは素晴らしいことですが、いくつかの問題も生じます。ルート パラメータを使用して /user/xianyu から /user/mengxiang に移動すると、元のコンポーネント インスタンスが再利用され、両方のルートで同じコンポーネントがレンダリングされるためです。破棄して再作成するよりも、ディスプレイの再利用の方が効率的です。唯一の問題は、ライフサイクル フック関数が呼び出されなくなる、つまりトリガーされなくなることです。ただし、常に問題よりも解決策の方が多いため、$route オブジェクトを監視することでこれを実現できます。

user.vueのコードを修正する

<テンプレート>
    <div>
        <h1>ユーザー</h1>
        <p>おかえりなさい、{{msg}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ () {
            戻る {
                // メッセージ: "私はページ 1 コンポーネントです"
                メッセージ:""
            }
        },
        時計:{
//to はこれから入力するコンポーネントを示し、from はどのコンポーネントから来たのかを示します。$route(to,from){
                this.msg=to.params.name; 
                コンソールログ(111);
            }
        }
    }
</スクリプト>

効果図は以下のとおりです。

監視していた $route オブジェクトがトリガーされ、コンソールにも次のように出力されたことがはっきりとわかります。

ネストされたルーティングを見てみましょう。

ネストされたルート:

ページ構造によっては、ネストされたルートが必要になる場合があります。たとえば、ホームページに入ると、カテゴリがあります。カテゴリの 1 つを選択すると、対応する詳細を入力できます。このとき、ネストされたルートを使用できます。公式ドキュメントでは、children 属性が提供されています。これは配列型で、実際にはルートのグループが含まれています。このとき、親子関係構造が出てくるので、children 属性内のルートは、children 属性の外部ルートの子ルートになります。

良いメモリは悪いコードほど良くはありません。コードを見てみましょう。

まず、srcディレクトリにphone.vueとcomputer.vueという2つの新しいvueファイルを作成します。

電話.vue

<テンプレート>
    <div>
        <p>{{メッセージ}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ () {
            戻る {
                メッセージ: 「ネストされたモバイル コンポーネント」
            }
        }
    }
</スクリプト>

コンピュータ.vue

<テンプレート>
    <div>
        <p>{{メッセージ}}</p>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ () {
            戻る {
                メッセージ: 「ネストされたコンピュータ コンポーネント」
            }
        }
    }
</スクリプト>

次に、App.vue ファイルを変更します。

<テンプレート>
  <div id="アプリ">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">ページ1</router-link>
    </div>
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

<スタイル>
#アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

上記の App.vue ファイルから、現時点ではページに page1 タグのみが含まれていることがわかります。

router.jsを修正してみましょう

'vue' から Vue をインポートします。
'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter)
'./page1.vue' から page1 をインポートします。
'./page2.vue' から page2 をインポートします。
'./user.vue' からユーザーをインポートします。
'./phone.vue' から電話をインポートします。
'./computer.vue' からコンピュータをインポートします。

定数ルート = [
    {
        パス:'/page1',
        コンポーネント:ページ1、
        子供たち: [
            {
                パス: "電話",
                コンポーネント: 電話
            },
            {
                パス: "コンピュータ",
                コンポーネント: コンピュータ
            },
        ]
    },
    // {パス:"/page2",コンポーネント:page2},
    // // {パス:'',リダイレクト:"ページ1"}
    // {パス:"",コンポーネント:ページ1},
    // {パス:"/user/:name",コンポーネント:user}
    
]

const ルーター = 新しい VueRouter({
    ルート
});

デフォルトルーターをエクスポートする

直感性を高めるために、他のすべてのルートはコメントアウトされ、ページには /page1 のみが残されます。

前述のように、 children 属性は実際にはサブルートのコレクションであり、サブルートは配列構造内に配置されます。

効果図は以下のとおりです。

ルーティングナビゲーションには 2 つの方法があります。

タグ ナビゲーション: タグ ナビゲーション <router-link><router-link> は、<a></a> タグにエスケープしてジャンプします。router-link タグの to 属性は、a タグの href 属性にエスケープされます。

// userという名前のルートにジャンプし、パラメータuserIdを渡します
<router-link :to="{ name: 'user', params: { userId: 123 }}">ユーザー</router-link>

プログラムによるナビゲーション: this.$router.push() を使用してプログラムによるナビゲーションを実装できます。もちろん、パラメータの受け渡しも実装できます。この種のプログラムによるナビゲーションは、通常、ボタンのクリック後にジャンプするために使用されます。

router.push({ name: 'user', params: { userId: 123 }})

これらは両方とも、ルートをuser/123パスにナビゲートします。

名前付きルート:

場合によっては、ルートを名前で識別する方が便利なので、面倒な作業が省けるように、公式ではルートに name 属性を追加しました。この属性に名前を付けた後、この属性にアクセスすることは、ルートに直接アクセスすることと同じです。

通常のルーティング:

router.push({ パス: '/user/:userId', パラメータ: { userId: 123 }})

名前付きルート:

router.push({ name: 'user', params: { userId: 123 }})

実際には、この 2 つに違いはありません。パスまたはエイリアスで一致できるルートにアクセスする 2 つの方法を提供するだけです。

以上がVueルーティングvue-router詳細説明ガイドの詳しい内容です。Vueルーティングについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • vue3+TypeScript+vue-routerの使い方
  • Vue-router ネストルーティングの詳細な説明
  • vue-router 4 の使用例の詳しい説明
  • Vue-Routerのルート設定の詳しい説明
  • バックエンドの権限に基づいてナビゲーション メニューを動的に生成する Vue-router のサンプル コード
  • Vue-Routerのインストールプロセスと原理の詳細
  • 非常に詳細な Vue-Router のステップバイステップのチュートリアル
  • Vue-Routerのインストールと使用方法の詳細な説明
  • vue3 で vue-router を使用するための完全な手順
  • Vue-routerルーティングの使い方
  • Vue ルーティング vue-router の使用方法の説明

<<:  Linuxにソフトウェアをインストールするいくつかの方法の詳細な説明

>>:  mysql 5.7.20 win64 のインストールと設定方法

推薦する

CSS 画像アニメーション効果のサンプルコード(フォトフレーム)

この記事では、CSS 画像アニメーション効果(フォトフレーム)のサンプルコードを紹介し、皆さんと共有...

JS配列ループ方式と効率分析の比較

配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...

Linux システムのスワップ領域の紹介

スワップ スペースは、オペレーティング システムに関係なく、今日のコンピューティングの一般的な側面で...

Vue は、デスクトップから Web ページにファイルをドラッグするためのサンプル コードを実装します (画像/オーディオ/ビデオを表示できます)

効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...

JSコンストラクタとインスタンス化およびプロトタイプ導入の関係

目次1. コンストラクタとインスタンス化2. コンストラクターとインスタンス化の関係は何ですか? 3...

LeetCode の SQL 実装 (175. 2 つのテーブルの結合)

[LeetCode] 175.2つのテーブルを結合する表: 人物+-------------+--...

MySQL の計画タスクとイベント スケジュール例の分析

この記事では、例を使用して、MySQL の計画されたタスクとイベントのスケジュールについて説明します...

JavaScript 配列重複排除問題の詳細な研究

目次序文 👀リサーチを始めましょう🐱‍🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...

MySQL 8.0 以降の一般的なコマンドの詳細な説明

リモートアクセスを有効にする次のコマンドを実行して、root ユーザーのリモート アクセス権を有効に...

HttpsページでBaiduシェアを使用するためのソリューション

サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...

Vue でユーザー権限に基づいてルートを動的に追加する方法

ユーザーの権限に応じて異なるメニュー ページを表示します。知識ポイントルートガード(事前ガードを使用...

JavaScriptにおける評価戦略の詳細な説明

目次それを覆う栗パラメータの受け渡し値渡し共同配送要約する拡張機能 - 遅延評価私は最近、JavaS...

JavaScript parseInt() と Number() の違いのケーススタディ

学習目標: parseInt() と Number() という 2 つの関数は、文字列をデータ型に変...

deepin20 で NVIDIA クローズドソース ドライバーをインストールするための詳細な手順

ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...

mysql8.0.11をインストールしてrootパスワードを変更し、navicat for mysqlに接続するアイデアの詳細な説明

1.1. ダウンロード:公式ウェブサイトから zip パッケージをダウンロードします。私は 64 ビ...