Vue-Routerのインストールプロセスと原理の詳細

1. フロントエンドルーティングの実装原則

URLハッシュパターン

hash値を変更する場合、# はページを更新せずにページ内の場所にジャンプできる場所識別子です。

次のように、 location.hashを使用してページのハッシュ値を変更します。

ページが更新されないことがわかりました。

URL historyモード

historyモードでは、ページを更新せずに URL を変更する方法が 5 つあります。

history.pushState() //スタックにプッシュする
history.replaceState() // 現在の URL を置き換え、前のページに戻ることはできません
history.back() //前のページに戻る
history.go(n) //n は 0 より大きい場合は前進するステップ数を示し、0 より小さい場合は後退するステップ数を示します
history.forward() // 1ステップ進む

history.go(-1) history.back()と同等である。

history.go(1) history.forward()と同等である。

3 つの主要なフロントエンドフレームワークにはそれぞれ独自のルーティングがあります。

AngularにはngRouterがある

ReactにはReactRouterがある

Vueにはvue-Routerがある

2. vue-Routerの基本的な使い方

2.1. インストール

npm インストール vue-router --save

vue-routerを使用する前提は、vueを使用する必要があることです。

vue-routerをルーターフォルダのindex.jsにインポートします。

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。

Vue.use(VueRouter) //vue-routerプラグインを参照

2.2. ルーティングを構成する

//ルーティングとコンポーネントの関係を設定します。const route=[
  {
      パス： '/'、
    // '/' にアクセスすると、ルートは新しいアドレス '/home' にリダイレクトされます
    リダイレクト: '/home',
  },
  {
     パス: '/home',
     コンポーネント: ホーム、
   },
   {
     パス: '/login',
     コンポーネント: ログイン、
    },
]

2.3. インスタンス化

const ルーター = 新しい VueRouter({
  mode: "history", //モードルートを設定する
});

2.4. 取り付けルート

main.jsに移動し、Vue をインスタンス化して、Vue にrouterをマウントします。

アプリを新しいVue({
 el:'#app',
  データ：{}、
  // vueルーターにマウントし、
})

2.5. ページに router-link と router-view を追加する

<!-- ルートを追加する -->
<router-link to="/home">ホーム</router-link>
<router-link to="/about">について</router-link>

<!-- ルーティングコンテンツを表示-->
<ルータービュー />

デフォルトでは、 router-link次のように a タグとしてレンダリングされます。

<router-link to="/home">ホーム</router-link>
// <a href="#/home" rel="external nofollow" >ホームページ</a> としてレンダリングします

router-view 、スペースを占有し、その場所のルートに対応するコンポーネントを表示するために使用されます。

3. ルーターモード

ルーティングモードには、 hashとhistory 2 つがあります。

3.1 ハッシュモード

vue-routerデフォルトでハッシュモードを使用します。

hash URL のアンカーは、#xx の後の内容です。アンカーをルーティングアドレスとして使用することで、通常は # の後の内容を変更し、ブラウザーが指定されたコンポーネントをレンダリングできるようにします。アンカーを変更すると、 onhashchangeイベントがトリガーされます。

3.2 履歴モード

history # 記号のない通常の URL であり、使用する場合はサーバー構成が必要です。履歴モードでは、対応する方法は上記の 5 つの方法と同じです。

必要なモードはvue-routerで指定できます。

const ルーター = 新しい VueRouter({
 モード:'履歴'
})

4. ルータリンクのプロパティ

デフォルトでは、 router-link a タグにレンダリングされますが、別のタグにレンダリングしたい場合もあります。

4.1. タグ属性

タグ属性は、router-link タグのレンダリングタイプを設定するために使用されます。たとえば、 router-link buttonとしてレンダリングする場合は、次のようになります。

<router-link to="/home" tag="button">ホーム</router-link>

レンダリングされた要素を確認すると、 buttonタグになっていることがわかり、追加された対応する属性値は無効になります。この時点ではクリックしても該当コンテンツにジャンプしません。引き続き下記のジャンプ方法をお読み下さい。

buttonに加えて、 tag の属性値には他のタグも指定でき、router-link はそれを対応するタグに自動的にレンダリングします。

4.2. 属性の置換

replaceは上記のhistoryモードのreplaceStateに相当します。ジャンプしてもhistoryは残りません。replace replace指定した場合は前のページに戻ることはできません。

<router-link to="/home" replace>ホーム</router-link>

4.3、アクティブクラス

active-class 、クリック時に現在選択されているrouter-linkのクラス名を設定します。デフォルトでは、クラス名はrouter-link-activeです。

<a href="#/" rel="外部nofollow"  
 aria-current="ページ" 
 クラス="ルーターリンクアクティブ" ルーターリンクアクティブ">
 ホームページ</a>

現在の要素スタイルを設定するには、 router-link-active。

次のようにアクティブクラスを設定します。

<router-link to="/" active-class="active">ホーム</router-link>
// router-link-activeクラス名はactiveに置き換えられます

グローバルrouter-link選択クラス名をカスタム名に変更する必要がある場合、それらを 1 つずつ設定するのは手間がかかりすぎます。ルータ内で均一に設定できます。

const ルーター = 新しい VueRouter({
 ルート、
 モード: 'ハッシュ'、
  linkActiveClasss: 'active' //クラス名を統一的に設定する})

5. vue-Rrouterページジャンプ方法

5.1. ルータリンクの実装

// シンプルな書き方 <router-link to="/">Home</router-link>

//動的パスを使用する
<ルーターリンク:to="{パス:'/'}"></ルーターリンク>
パスまたは名前を使用できます

// パラメータを渡して 1 にジャンプ
<ルーターリンク:to="
{ 名前:'home'、パラメータ:{ id:'123'、名前:'gq' }}
">
</ルーターリンク>

// パラメータ <router-link :to=" でジャンプ
{ パス:'/'、クエリ:{ id:'123'、名前:'gq' }}
">
</ルーターリンク>

5.2. js 経由のリダイレクト

// シンプルに書くとこうなります。$router.push({ path:'/' })
// push は history.pushState と同じです // パラメータを指定してジャンプします this.$router.push({
 名前: 'home'、パラメータ: { id:'123'、名前:'gq' }
})

//複数のパラメータがある場合 this.$router.push({
 名前: 'ホーム'、 
 パラメータ: { id:'123' , name:'gq' },
 クエリ: { プラン:'private' }
})

6. 動的ルーティング

場合によっては、ページのpathが不確実なことがあります。たとえば、予想されるパスが/user/123または/user/456である場合があります。その背後にある値はユーザー ID またはその他の値です。

ルートの設定

ルーター:[
 {
     パス: '/user/:id',
   コンポーネント:()=>{ import('../views/user.vue') }
 }
]

ルートの追加

<router-link to="/user/123"> ユーザー:123 </router-link>
<router-link to="/user/456"> ユーザー:456 </router-link>

 
// id 値を動的に設定する <router-link :to=" '/user/'+id "> user:{{ id }} </router-link>

背後にあるダイナミックな価値を理解する

this.$route.params.id

ここでのIDは設定ルートで設定されたIDなので、一貫性を保つようにしてください。

方法2: クエリを使用してパラメータを渡す

<ルーターリンク先="/user?id=123"></ルーターリンク>

//値を取得するときはthis.$route.query.id

さらに、 this.$router.addRoutes([]) routes設定と同じように、配列を渡す動的ルートを追加することもできます。

7. ルートの遅延読み込み

遅延読み込みとは、使用されるときに読み込み、使用されないときには読み込まないことを意味します。

アプリケーションをパッケージ化してビルドすると、js パッケージが非常に大きくなり、読み込み速度に影響します。異なるルートに対応するコンポーネントを異なるコードブロックに分割し、ルートにアクセスするときに対応するコンポーネントを読み込むことができれば、より効率的になります。

ルートの遅延読み込みは具体的に何を行うのでしょうか?主な機能は、ルートに対応するコンポーネントを js コードブロックにパッケージ化し、ルートにアクセスしたときにのみ対応する js をロードすることです。

//直接参照 import Home from './component/home'
定数ルート = [
 {
  パス:'/home',
  コンポーネント:ホーム
 }
]

//遅延読み込み const ルート = [
 {
  パス:'/home',
  コンポーネント:()=>{ import('./component/home') }
 }
]

8. ネストされたルート

実際のアプリケーションでは、通常、ネストされたコンポーネントの複数のレイヤーで構成されます。

実装手順:

まず、対応するサブコンポーネントを作成し、ルートマッピングで対応するサブルートを構成します。

2番目:コンポーネント内でrouter-viewタグを使用する

{
 パス: "/body",
 コンポーネント: ()=> import( "../components/bodyLayout.vue"),,
 子供たち：[
  {
   パス: "マネージャー",
   コンポーネント: ()=> import( "../components/blankView.vue"),
   子供たち：[
    {
      パス: "ユーザー"、
      コンポーネント: ()=> import( "../views/manager/user.vue")
     },
    ]
   },
  ]
}

userコンポーネントにアクセスする場合のルートは次のようになります：/body/manager/user

注意: ネストされたルートのパスを設定するときは、「/」を追加しないでください。追加するとルートが変更されます。

{
 パス: "/user",
 コンポーネント: ()=> import( "../views/manager/user.vue")
}
//この時点でアクセスルートは「/user」になります

9. ルーターとルートの違い

main.jsでrouterを印刷し、任意のコンポーネントでthis.$routerを印刷してみます。印刷結果は次のようになります。

2つの結果はまったく同じであることがわかりました。このようにすれば、次の意味を理解することは難しくありません。

router独自のメソッドを持つVueRouterインスタンスです。たとえば、 new VueRouterで作成されたインスタンスを使用して別の URL に移動する場合は、 jump メソッドで説明されているrouter.pushを使用できます。

route は現在アクティブなルートオブジェクトであり、現在のルート情報が含まれています。このオブジェクトを通じて、 path 、 paramsパラメータ、 queryパラメータ、 name 、 matched 、およびhash

10. ルーティングガード

ナビゲーションガードを使用する理由は何ですか?要件を考えてみましょう: SPA アプリケーションでは、ページが切り替わると Web ページのタイトルはどのように変化するでしょうか?

// 対応するコンポーネントに created(){ を追加します
 document.title="テスト"
}

このコンポーネントにアクセスすると、タイトルが自動的に「テスト」に切り替わります。

上記の方法だと、開発したコンポーネントの数だけ追加しなければならず、面倒です。そこで、ルーティングガードを使って統一的に変更し、メンテナンスしやすくする必要があります。

10.1 グローバルガード

1>、 router.beforeEachを使用して、ルートが変更されるたびに渡されるグローバルフロントガードを登録します。 beforeEach が受け取るパラメータは、3 つのパラメータを含む関数です。

router.beforeEach((to,from,next)=>{
// から へのルート 
// ルートに名前属性を追加するだけです document.title = from.name
 次（）
})

注意: 上記の 3 つのパラメータの順序は変更できません。 next は欠落することはできません。必ず追加する必要があります。そうしないと、ページは次のステップにジャンプできず、空白領域で停止します。

2>、 router.afterEachを使用してグローバル after-guard を登録します。

router.afterEach((to,from)=>{
 console.log('バックガード')
})

両方のガードはグローバルガードです。afterEach afterEachルートジャンプが完了した後に実行されるため、 next必要ありません。パラメータは2つだけです。

10.2. 専用ルーターガード

ルート構成で直接定義されたガードは、ルートオブジェクトの 1 つに配置され、このルートでのみ機能することを除いて、グローバルガードと同じように使用されます。

{
 パス: "/test",
 名前: "テスト",
 コンポーネント: ()=> import( "../views/manager/test.vue"),
 beforeEnter:(to,from,next)=>{
  console.log('テスト開始前')
  次（）
 }
}

これらのガードには、前のグローバルガードと同じメソッド引数があります。

10.3. コンポーネント内のガード

ルートナビゲーションガードは、ルートコンポーネント内で直接定義できます。コンポーネント内で定義されたガードは、コンポーネント内ガードです。

定数Foo = {
  テンプレート: `...`,
  beforeRouteEnter(to, from, next) {
    // このコンポーネントをレンダリングする対応するルートが確認される前に呼び出されます // いいえ!できる！コンポーネントインスタンス `this` を取得します。
    // ガードが実行される前にコンポーネントインスタンスが作成されていないため},
  ルート更新前(to、from、next) {
    // 現在のルートが変更されたがコンポーネントが再利用されたときに呼び出されます // たとえば、動的パラメータを持つパス /foo/:id の場合、/foo/1 と /foo/2 の間を移動すると、
    // 同じ Foo コンポーネントがレンダリングされるため、コンポーネント インスタンスが再利用されます。この場合、このフックが呼び出されます。
    // コンポーネントインスタンス `this` にアクセスできます
  },
  beforeRouteLeave(to, from, next) {
    // このコンポーネントの対応するルートから移動するときに呼び出されます // コンポーネントインスタンス `this` にアクセスできます
  }
}

注意: beforeRouteLeaveルートを離れるときに実行され、 nextを追加する必要があります。そうしないと、正常に次のルートにジャンプしません。

11. キープアライブ

ルートを切り替えると、ページは毎回再レンダリングされます。コンポーネントの中には、保持する必要があるデータを持つものがあります。切り替えるたびに再レンダリングしたくないので、 keep-aliveを使用してコンポーネントをラップし、 created mountedやその他のフック関数が最初の読み込み時にのみ実行されるようにします。

keep-alive Vueの組み込みコンポーネントであり、これを使用すると、含まれているコンポーネントの状態を保持したり、再レンダリングを回避したりできます。

<div id="アプリ">
 <router-link to="/home">ホーム</router-link>
 <router-link to="/login">ログイン</router-link>
 <キープアライブ>
  <ルータービュー></ルータービュー>
 </キープアライブ>
</div>

keep-aliveコンポーネントを追加します。切り替え時に、コンポーネントは最初の 1 回のみレンダリングされ、その後は再レンダリングされません。

11.1. キープアライブ特有のメソッド

アクティブ化(){
 console.log('アクティブ化')
},
非アクティブ化(){
 console.log("非アクティブ化")
}

これら 2 つの関数は、コンポーネントが状態に保持され、 keep-aliveが使用されている場合にのみ実行されます。

キープアライブライフサイクルの実行順序:

created -> mounted -> activated

deactivated終了した後にのみトリガーされます

11.2. キープアライブ属性

キープアライブには 2 つの非常に重要なプロパティがあります。

include - 文字列または正規表現。一致するコンポーネントのみがキャッシュされます。

exclude - 文字列または正規表現。これに一致するコンポーネントはキャッシュされません。

<キープアライブを含める="テスト">
 <ルータービュー></ルータービュー>
</キープアライブ>

//テストコンポーネントは名前属性を追加します <template>
  <div>
    テスト
  </div>
</テンプレート>
<スクリプト>
 エクスポートデフォルト{
  名前:'テスト'
 }
<スクリプト>

この時点では、 testコンポーネントのみがキャッシュされ、他のコンポーネントはキャッシュされません。

同時にキャッシュする必要がある他のコンポーネントがある場合、 includeスペースなしでコンマで区切られた複数の値を追加できます。

<keep-alive include="test,user">
 <ルータービュー></ルータービュー>
</キープアライブ>

除外の使用:

<keep-alive exclude="test,user">
 <ルータービュー></ルータービュー>
</キープアライブ>

前の例とは逆に、 testとuserコンポーネントのみがキャッシュされず、他のコンポーネントはキャッシュされます。

これで、vue-Router のインストール原理の詳細なプロセスに関するこの記事は終了です。より関連性の高い vue-Router コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: