導入ヴュー・ルータのルーティングシステム

ルーティングの原則

• 従来の開発モード変更URLの後にすぐにページ全体をレンダリングリクエスト、ページ全体の応答を開始
• SPAアンカーが値を変更する要求を開始しません、AJAXリクエストは、ローカルページのデータを変更開始しました
  • ページには、より優れたユーザーエクスペリエンスをジャンプしません

スパ

• 単一ページのアプリケーション（単一ページのアプリケーション）
• フロントエンドルーティング
  • アンカー値モニタ
  • Ajaxの動的なデータを取得します
  • コア・ポイントは、アンカーポイントの値であります
• フロントエンドフレームVueが/角度/単一ページのアプリケーションの開発のために非常に適した反応します

基本的な使用

• ビュールータ
• これは、プラグインVUEのコアであります
• 1：ダウンロード npm i vue-router -S
• 1.5（重要）：プラグインVue.use(VueRouter);
• 2：オブジェクトmain.jsを導入VUEルータ import VueRouter form './x.js';
• 3：ルートオブジェクトを作成します。 var router = new VueRouter();
• 4：設定ルーティングルール router.addRoutes([路由对象]);
  • ルートオブジェクト{path:'锚点值',component:要(填坑)显示的组件}
• 5：ルートオブジェクトのVueに設定されます
  • オプションで渡さ - >キーは、ルータと呼ば
• 6：1滞在ピット（成分を使用して） <router-view></router-view>

ルータリンク

• に<router-link to="/xxx/x">点我</router-link>
• 私たちはラベルをHREF生成するヘルプ
• あなたがアンカー値の名前を変更する必要がある場合はアンカー値コードの保守は、便利ではありません
  • それ【使用1 +周波数（設定ルール）]を変更する必要があるコードの場所

名前付きルート

• 1：名前のルートオブジェクト { name:'home',path:'/home',component:Home}
• 2：説明ルータ・リンクこの属性のルール
  • <router-link :to="{name:'home'}></router-link>"
  • 名前でルートオブジェクトを検索し、そのパスを取得し、あなた自身のhrefを構築
• 大幅にメンテナンスコストの削減、アンカー値が変化するパスプロパティ缶main.jsにのみ変更されました

ルータリンクのパラメータ、

• Vue.prototype.xxx = {add:fn}
• this.xxxを使用してすべてのコンポーネントは、このオブジェクトを取得することができます
• クエリ文字列
  • 1：設定:to="{name:'detail',query:{id:hero.id} }"
  • 2：ルール {name:'detail',path:'/detail',component:Detail}
  • 3：GET this.$route.query.id
  • 4:生成 <a href="/detail?id=1">
• パスウェイ
  • 4:生成 <a href="/detail/1">
  • 1：設定 :to="{name:'detail',params:{id:hero.id} }"
  • 2：ルール { name:'detail',path:'/detail/:id'}
  • 3：GET this.$route.params.id
• クエリ文字列パラメータの設定
  • ルータリンクかつて
  • 一度撮影したとき
• 設定パラメータのパスの方法
  • ルータリンクかつて
  • 宣言の構成ルール
  • 一度撮影したとき
• コード書かれた要約ノート
  • パスウェイは、ルーティングルールの場所で宣言される必要があります

エイリアス

/a別名はある/b、ユーザーが訪問その手段/bURLが残る場合は、/bしかし、ルートがマッチした/a、へのユーザーアクセスの場合のように/a同じ。

{ path: '/a', component: A, alias: '/b' }

リダイレクト

// 方式一：字符串路径path
{ path: '/a', redirect: '/b' }
// 方式二：name
{ path: '/a', redirect: {name: 'b'} }
// 方式三：动态返回重定向目标
{ path: '/a', redirect: to => {
  // 方法接收 目标路由 作为参数；return 重定向的 字符串路径/路径对象 
}}

フェーズの概要

• VUEルータの手順を使用して：1：2が導入される：ルーティング例4を作成する：プラグ3をインストール、設定、ルーティングルール5：ルーティングオブジェクト関連VUE 6：左ピット
• =「/ xxxは」名前付きルートへのルータのリンク
  • 1. name属性のオブジェクトにルーティングルールを追加します
    2. 在ルータリンク中： "：= "{XXX」名"}に

• $ルートのルーティング情報オブジェクト、読み取り専用オブジェクト

• $ルータのルーティング操作対象、書き込み専用のオブジェクト

• 図のソースからVueのルータ。

  • 1. Vue.use（オブジェクトウィジェット）; //プロセスは、VM垂下特性のため、いくつかのグローバルな構成要素、または構成要素、オブジェクトを登録します

    2. そして、VMの吊り下げにコンポーネントオブジェクト：Object.defineProperty（Vue.prototype、 '$ルータ'、{

       取得：関数（）{そのルータオブジェクトを返します。

       }

       }）

ネストされたルーティング

ネストされたルートの使用に、ちょうどアセンブリプロファイル記事の上に画像を変更するには、アンカーの値を変更する必要

• コードの考え
  • 1：ルータビュー細分化
    • ルータビューを含む第1層をルータビュー
  • 2：対応する個々の成分への各ピット掘り込み
• 注意事項：1：ルートルート子供：ルータ-ビュー2を備えたルータビュー

ルーティングガード

これは、実際にルート変更イベントのコールバック関数です

• グローバルルーティングガード

  • フロントrouter.beforeEach((to, from,next) => {})
  • 助詞router.afterEach((to, from) => {})

• 排他的なガードをルーティング

  • const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) =>{
            // ...
          }
        }
      ]
    })

• アセンブリ内のガード

  • const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        // 但是，可以这样用
          next(vm => {
            // 通过 `vm` 访问组件实例-> 未来的组件this
              vm.msg = '数据在此';
          })
      },
      beforeRouteUpdate (to, from, next) {
        // 触发条件见下文
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    }

  • beforeRouteUpdateトリガ条件（動的ルーティングパラメータ）

    • 1：ルーティングの設定

    • {path:"/xxx/:id"}

    • 2：ルータリンク

    • <router-link to="/xxx/1"

    • <router-link to="/xxx/2"

• 次

  • 次のリリース（）;

  • ナビゲーションをキャンセル（URLはクリックを事前に復元）next(false)

  • リダイレクト

    • next('/xxx')
      // 或者
      next({name:'路由对象的name属性'});
      

• ||から

  • 現在のURLであり、より一般的に使用されるオブジェクトの.fullPath特性

アプリケーションガードメタプロパティ

• メタメタデータをルーティング - >メタルールは、設定権限をルーティング検証する必要があるかどうかであります

  • そして、ルーティングオブジェクトname属性ピア { meta:{ isChecked:true } }

• ルートフック - >実行時のアクセス制御機能

  • 各ルートの試合の後、コンポーネントの前にルータ・ビューをレンダリング

  • router.beforeEach(function(to,from,next) {  
        // 判断to或from的fullPath即可
    } )

ナビゲーションのプログラミング

• 1：特定のアンカーポイントへのジャンプ、およびディスプレイページ this.$router.push({ name:'xxx',query:{id:1},params:{name:'abc'} });
• 2：構成ルール {name:'xxx',path:'/xxx/:name'}
• 3：歴史の記録によると、前方または後方
  • this.$router.go(-1|1);
  • さらに1つの代表的には、-1のステップバックを取ることです

トランジションエフェクトとキャッシュ

私たちは、ルートが変更されたら、[OK]、ページを変更する必要があります！私たちは、このようなフェードなど、いくつかのエフェクトを追加すると同時に、それは組み込みのコンポーネントの移行のために使用することができます

さらに、キャッシュの問題を考慮すると、キープアライブ結合アセンブリの使用と相まって

だから、あなたはこれが見

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

トランジションとキープアライブの詳細リファレンス