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 のインストールと設定方法

推薦する

MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...

登録ページを実装するためのJS、CSS、HTML

HTML と CSS で実装された登録ページ テンプレート。早速、コードを見てみましょう。更新: ...

8桁の割引コードをランダムに生成し、MySQLデータベースに保存します。

現在、多くの企業が割引コードを通じてプロモーションを行っています。今では、8桁の割引コードを実装して...

Angularの親子コンポーネント通信の詳細な説明

目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...

JS に依存せずにレスポンシブ レイアウトを実現する CSS3 モバイル vw+rem メソッド

1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...

NextCloud プライベート クラウド ストレージ ネットワーク ディスクの構築に関する詳細なチュートリアル

Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...

シンプルなメッセージボードケースを実現するJavaScript

参考までに、Javascriptを使用してメッセージボードの例(メッセージ削除あり)を実装します。具...

PSSHを使用してLinuxサーバーを一括管理する

pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...

JavaScript の基本変数

目次1. 変数の概要1.1 変数のメモリへの保存1.2 変数の使用1. 変数を宣言する2. 譲渡3....

Linux で同じバージョンの R を使用して Seurat2 と Seurat3 を同時にインストールするチュートリアル

Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...

MySQLのファジークエリの要約

1. 一般的な使用法: (1)%で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...

js 配列から重複を削除する 11 の方法

実際の業務や面接では、「配列の重複排除」の問題によく遭遇します。以下は、js を使用して実装された配...

ポップアップウィンドウの上下中央左右と透明な背景のロックウィンドウ効果を実現する CSS

クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウ...

Nginx 構成 PC サイトとモバイル サイトの分離によるリダイレクトの実現

PCサイトとモバイルサイトの分離設定にはnginxを使います。私のPCサイトとモバイルサイトは、SE...

HTMLページでチェックボックスを操作する方法

チェックボックスは Web ページで非常によく使用されます。e コマースの Web サイトでもプラッ...