ビュー-8

ルータ

SPA（単一ページのApp）単一ページのアプリケーション

複数ページのアプリケーション
のリンクタグを接続することにより、HTMLファイル、各ページに複数の

短所
- あまりにも冗長開発、コンパイル、時間のかかるを圧縮されています
- スピードはページ間をジャンプするには遅すぎます

単一ページのアプリケーション

それはページがあるので、あなたは、ページを更新する必要はありません。
このページのコンテンツスイッチ
私たちのルートを達成するために、単一ページのコンテンツの切り替えは使用することです
今日、我々のアプリでは、スパの形で主要な開発であります

VUEルーティング機能

単一のページを達成するために切り替え
ルートキャリーパラメータ
ルートナビゲーションガード
（以前のデータアクセスアセンブリの取得要求に）ルーティングデータ予圧

VUE-ルータの基礎

VUEルーティングモード（モード）何をしている、いくつかありますか？これらの環境で実行しますか？
- ハッシュ：ルートのURLのハッシュ値を使用します。これは、HTML5の歴史のAPIブラウザをサポートしていませ含め、すべてのブラウザをサポートしています。/＃ホーム
- 歴史：依存HTML5履歴APIとサーバー構成。[必須]のバックエンドサポート /ホーム
- 抽象的な：このようNode.jsのサーバーとして、すべてのJavaScriptランタイム環境をサポートします。APIは、ブラウザ発見されていない場合、ルーティングは自動的にこのモードに強制的に。[]このモードは使用されません
ステップを使用してルーティング
1. インストールVUE-ルータ yarn add vue-router -S
2. ファイルを作成するindex.js srcディレクトリの下にルータのディレクトリを作成し、このディレクトリには、ルータモジュールであります
3. サードパーティの依存関係、および登録されたルートを紹介
  `` `JavaScriptの
  読み込みVueの「VUE」から
  のインポート" VUE-ルータのVueRouterから
  Vue.use（VueRouter）//は、このサードパーティのプラグVUE-ルータ使用
  `` `
  注：上にファイル全体にキーをインポートします
4. ルータオブジェクトのインスタンスを作成し、ルーティングテーブルを作成し、
  javascript const routes = [ { path: '/home', component: Home }//每一个对象就是一个路由 ] const router = new VueRouter({ routes//路由表必写的 })
5. エクスポートルータの例
  export default router
6. エントリファイルmain.jsの例としては、ルートルータを導入し、ルートの例を登録します
  javascript import router from './router/index.js' new Vue({ router, render: (h) => App }).$mount('#app')
7. ルーティング表示エリアにルーティング
  1. ルートがよくあるなら、私たちは、ルータ・ビューのコンポーネントによって表される、アプリケーションのアセンブリを置きます
```
 <router-view />
```
8. ページを最初に開いたときに、リダイレクトを行う必要が自動的にこのルート上の/ homeにジャンプすることです
  javascript const routes = [ { //我们要求这个路由的配置要放在路由表的最上方 path: '/', redirect: '/home' } ]
9. ビジネス：間違ったルートの試合、
  javascript const routes = [ { path: '/', redirect: '/home' //重定向 }, { path: '/home', component: Home }, { path: '/list', component: List }, { path: '/detail', component: Detail }, { path: '/login', component: Login }, { path: '/register', component: Register }, { path: '/user', component: User }, { path: '/shopcar', component: Shopcar }, { path: '/error', component: Error }, { //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个 path: '**', redirect: '/error' } ]
10. VUEルーティング・モードは、MODEを判断する
  あなたは、ハッシュ、その上にそうラベル、使用している場合1.
  2.あなたが歴史を使用する場合は、我々はルータリンクこのコンポーネントへのより良いラベルになり
  ルータリンク部品本体-財産持っている必要があります
  -ルータリンクを、このコンポーネントに加えキープアライブブラウザのキャッシュを属性することができます
11. 二つの経路
  javascript const routes = [ { path: '/shopcar', component: Shopcar, children: [ { path: 'yyb', //不写 / component: Yyb } ] } ]
  -注：構成後に書かれ、アセンブリ内の経路に対応する表示領域をルーティング書き込み、忘れてはいけません
12. 名前付きルート
  
  役割：パスは速記であります
```
  {
      path: '/shopcar',
      component: Shopcar,
      //子路由 
      children: [
        { 
          path: 'yyb', // 容易犯错点  /yyb X 
          component: Yyb,
          name: 'yyb' //命名路由
        },
        {
          path: 'junge',
          component: Junge
        }
      ]

    },
```
  - 使用します。
```
  <router-link :to = "{name:'yyb'}"/>
```
    VUE-ルータ前売。
    
    動的ルーティングルーティング＆パラメータの受け渡しルートジャンクションリファレンス＆

ダイナミックルーティング：
- URLルーティングが変更されますが、一般的な構成要素は、再ルーティング
- 例えば：
  - localhost：3000 /ディテール/ 001 A = 1＆B = 2
  - localhost：3000 /ディテール/ 002 A = 2＆B = 3
  - ディテール

VUE CLI3は、リバースプロキシに20分を設定します

ルートディレクトリの下にはvue.config.jsを作成

// vue.config.js中可以默认直接使用  http-proxy-middleware
module.exports = {
  devServer: {
    proxy: {
      '/douban': { // /douban 是一个标记
        target: 'http://api.douban.com', // 目标源
        changeOrigin: true, // 修改源
        pathRewrite: {
          '^/douban': '' 
        }
      },
      '/siku': {
        target: 'https://android.secoo.com',
        changeOrigin: true,
        pathRewrite: {
          '^/siku': ''
        }
      }
    }
  }
}

質量参加の経路

  <router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}"></router-link>

ルーティング接合参照
- ルーティングコンポーネント：私たちは、ルーティングコンポーネントを使用する人は、我々はと呼ばれることがわかりました
- ルーティングコンポーネント本体は自動的に$経路データを追加します
```
  id: this.$route.params.id
  query: this.$route.query.xxx
```
プログラムによるナビゲーション
- 押す
  - this.$router.push('/home')
  - この。$のrouter.push（{名前、パラメータ、クエリ}）
  - 押し当社の事業は、ブラウザの履歴に保存することができます
- 置き換えます
  - この。$のrouter.replace（ '/ホーム'）
  - この。$のrouter.replace（{名前、パラメータ、クエリ}）
  - ブラウザの履歴に保存されている当社の業務を置き換えることはありません、効果は2を返すことです
ビジネス：
- ボタンの戻り
  - 押す
  - 置き換えます
  - バック
  - 行きます

高度なルーティング部 - ナビゲーションガード（ルーティングガード）

役割：似た--- [セキュリティ]
- ガードルーティング
  - 入ります
    - 例：にデータを運びます
  - アウト
    - たとえば、次のようなものが出て行って得るために
ナビゲーションガードの3つの形式があります。
- ：グローバルナビゲーションガード
  1. グローバルフロントガード router.beforeEach(fn)
    1. 三つのパラメータfnがあります。
  2. グローバル分析ガード
    1. 2.5.0+では、グローバルrouter.beforeResolveガードにサインアップすることができます。ナビゲーションが確認される前に、これは、警備員と非同期のルーティングコンポーネントは、すべてのコンポーネントで解決された後、同時に、それを除いて、同様のrouter.beforeEach、分析的ガードが呼び出されました。
    2. 私たちは、警備員と非同期ルーティングコンポーネントのプロジェクト全体が解析されていることを確認する必要があります
  3. グローバル・後衛
    - あなたは、いくつかのユーザーフレンドリーなヒントを行うことができます
- B：排他的なガードをルーティングbeforeEnter
  - ルーティングテーブルガードフックで書かれました
  - すなわち、現在のルーティング関連のために、次に無関係ルーティング有する他は、その変化を監視することは不可能です
- C：成分ガード内
  - フロントガードbeforeRouteEnter（（へ、から、次）=> {}）モジュール
    - ナビゲーションは、コールをアセンブリに入ります
    - これは、あなたがこれにアクセスする必要がある場合は、次の（VM => {}）を介してアクセスする必要があり、訪問することはなく、
    - コンポーネントが作成されていないため、この時点では、ので、これではありません
    - ケース：プリロードデータ（データは、アセンブリに入る前に取得されます）
```
    next(vm => { //vm指的就是组件
       const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
       vm.$set(vm.category,'categorys',result)
     })
```
  - アセンブリ内のリアガード
    コンポーネントが呼び出したときのままにするのは良い-
    -これは、にアクセス可能です
  - ガード更新モジュール内（転送ルートとルート基準接点参照）
    - 経路の電流の変化が、コンポーネントが多重化されたときに呼び出されます
    - 例えば、動的パラメータ/ FOO /有するパス：IDを/ FOO / 1および/ FOO / 2ジャンプの間に、
    - Fooの同じ構成要素をレンダリングするので、このようにコンポーネントのインスタンスが多重化されます。そして、このフックは、この場合に呼び出されます。
    - あなたは、コンポーネントのインスタンスにアクセスすることができます this
機能：ナビゲーションガードは、ルーティングの変更を監視することができます
名詞
- フロント：---教室の先生に入る前に、現在のルートを入力するには
- リア：現在のルートを残すために---先生は教室を去りました
次回のご利用について
- 次の（）次の（真）に相当する現在の目標ルートからジャンプする経路を表します
- 次の（偽の）ルートが目標ルートよりも少ない電流からのジャンプを表し、彼らが通過していないと述べました
- 指定された経路を移動：次（「/ログイン」）次の（{「/ログイン」パス}）と等価です
- 次の（ '/ログイン'）次の（{パス： '/ログイン'、paramsは、クエリ}）と等価です
- 次の（FN）のデータがプリロード
ビジネス：我々はプロジェクトの家に入るが、私たちは、アカウントを登録していないとき、それは自動的に登録/ログインページにジャンプ

  router.beforeEach((to,from,next)=>{
      const name = localStorage.getItem('name')
      if( name || to.path === '/login' ){
        //如果有   /  -->  /home
        next()
      }else{
        next('/login')
      }
  })

ビジネス：ログインしていない場合、ユーザーは、ログインしているかどうかを判断するために、鉱山のページに入ると、ログインページをスキップ
ルートナビゲーションガード
- フックを聴く3. 7ルート

ビジネス：
- ルートは、グローバルフロントガードでプロジェクト全体の変更を監視します
- 排他的なガードの経路の経路の変化を監視
- リスニングのコンポーネントをルーティングコンポーネントでルーティング変更のナビゲーションガード

ダイナミック効率
遅延ロードをルーティング
1. Vueの非同期成分+のWebPACK

ルータ

SPA（単一ページのApp）単一ページのアプリケーション

VUEルーティング機能

VUE-ルータの基礎

VUE-ルータ前売。

動的ルーティングルーティング＆パラメータの受け渡しルートジャンクションリファレンス＆

高度なルーティング部 - ナビゲーションガード（ルーティングガード）

おすすめ