中国語ドキュメント: https://router.vuejs.org/zh/ Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js のコアと深く統合されているため、シングルページ アプリケーションを簡単に構築できます。ルーティングは実際にはポインティングとして理解できます。つまり、ページ上のボタンをクリックすると、対応するページにジャンプする必要があり、これがルーティング ジャンプです。 まず、3 つの単語 (route、routes、router) を学びましょう。
小さなデモを見てみましょう (記事は少し長いので、辛抱強く読んでください。ゆっくり学習することでのみ、早く進歩することができます。もちろん、一緒に読みながら入力することもできます)。 まず、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の他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: Linuxにソフトウェアをインストールするいくつかの方法の詳細な説明
>>: mysql 5.7.20 win64 のインストールと設定方法
Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...
HTML と CSS で実装された登録ページ テンプレート。早速、コードを見てみましょう。更新: ...
現在、多くの企業が割引コードを通じてプロモーションを行っています。今では、8桁の割引コードを実装して...
目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...
1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...
Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...
参考までに、Javascriptを使用してメッセージボードの例(メッセージ削除あり)を実装します。具...
pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...
目次1. 変数の概要1.1 変数のメモリへの保存1.2 変数の使用1. 変数を宣言する2. 譲渡3....
Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...
1. 一般的な使用法: (1)%で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...
実際の業務や面接では、「配列の重複排除」の問題によく遭遇します。以下は、js を使用して実装された配...
クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウ...
PCサイトとモバイルサイトの分離設定にはnginxを使います。私のPCサイトとモバイルサイトは、SE...
チェックボックスは Web ページで非常によく使用されます。e コマースの Web サイトでもプラッ...