Vue路由 —— vue-router

          最初の 2 つの記事を振り返ると、最初のレベルのルーティング、宣言型ナビゲーション、プログラムによるナビゲーション、ルーティング リダイレクト、ネストされたルーティング、および動的ルーティングについて説明しましたが、この記事では、Vue ルーティング関連のコンテンツについて説明します。

名前付きルート        

        名前が示すように、名前付きルートには名前付きルートがあり、前のケースを続けます。

        /router/index.js ファイルでルーティング情報を構成する - ルートの命名

<!-- /router/index.js -->
...
  {
    path: '/play/:id',
    component: Play,
    name: 'playMusic'
  }
]
...

パラメータ

        ルート情報に名前をつけて「playMusic」というルート名をつけますが、このルート名をつけるとどうなるでしょうか？前回の記事では、js メソッド (location.href) と vue-router が提供するプログラムによるナビゲーション メソッド (this.$router.push(`/play/${id}) を使用して、曲を選択し、クリックして再生ページにジャンプしました。 ` ) ) ルート名を取得したので、vue-router が提供するプログラムによるナビゲーション メソッドを使用して、次のようにコードを調整できます。

<!-- /views/music/KuGou.vue -->
...
  methods: {
    handlePlay (id) {
      // alert('获取歌曲id：' + id)
      // location.href = '#/play'
      // 编程式导航
      // this.$router.push(`/play/${id}`)
      this.$router.push({ name: 'playMusic', params: { id: id } })
    }
  }
}
</script>

        テスト実行してみましょう:

クエリ

        ここで使われているのはダイナミックルーティング方式です. 曲を選択し, 曲のIDを持って再生ページにジャンプし, 曲IDで曲の再生リンクをリクエストする. ダイナミックルーティングを使う前に, this.$ はrouter.push(`/play/${id}`) を使用すると、次の状況が発生します。

        ルーティングに /play/10001 のルーティング情報が設定されておらず、10 曲以上の曲があり、そのようなルーティング情報を設定するのは明らかに不合理です! しかし、動的ルーティングを使用せずにこれを行うにはどうすればよいでしょうか?

<!-- /router/index.js -->
...
  {
    path: '/play',
    component: Play,
    name: 'playMusic'
  }
]
...

        動的ルートによって運ばれるパラメーターは /play/:id の形式になっているため、運ばれるパラメーターが /play?id= の形式である場合、どうすれば取得できますか? —— クエリ

<!-- PlayView.vue -->
<template>
    <div>
        <h3>播放界面</h3>
        当前歌曲Id —— {
   
   { songId }}
    </div>
</template>

<script>
export default {
  mounted () {
    // this.songId = this.$route.params.id
    this.songId = this.$route.query.id
    // console.log(this.$router)
    console.log(this.$route)
  },
  data () {
    return {
      songId: ''
    }
  }
}
</script>

        テスト実行してみましょう:

         次に、このコンテンツの部分が終了し、運ばれた ID を再生ページに送信し、ajax を介して再生して、バックエンドに再生リンクを取得して再生ページで再生するように要求します。次に、ルーティング モードについて説明します。

ルーティング パターン

        Vue は 2 つのルーティング モードをサポートしています: 1. ハッシュ モード 2. 履歴モード

hash模式：        http://localhost:8080/#/music/
history模式：     http://localhost:8080/music

        上記の例では、ハッシュ モードを使用しています。

        履歴モードに変更するにはどうすればよいですか? /router/index.js; に mode: 'history' を追加するだけです。

<!-- /router/index.js -->
...
const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

        追加が完了したら、プロジェクト npm start を再実行します。

         履歴モードは明らかにハッシュ モードよりも優れているように見えますが、履歴モードに問題はありますか? このモードでは、アプリケーションが単一ページのクライアント アプリケーションであるため、バックエンド構成のサポートが必要です.バックエンドが正しく構成されていないと、ユーザーがブラウザで直接アクセスすると 404 が返されます.これは見苦しいです! したがって、サーバー側のすべての状況をカバーする候補リソースを追加する必要があります。URL がどの静的リソースとも一致しない場合、アプリが依存するページである同じ index.html ページを返す必要があります。

詳細については、次の記事をご覧ください:さまざまな履歴モード | Vue ルーター

ルーティングの原則:

1) ハッシュルーティング:

        パスがいつ変更されるかを知るには、BOM が提供する window.onhashchange を使用してパスの変更を監視し、location.hash でパスを切り替えてハッシュ値を取得できます。

2) 歴史ルート:

        H5 の新機能を使用して、BOM によって提供される window.onpopstate はパスの変更を監視し、変更されたパスを更新でき、パスは history.pushState を介して切り替えられます。

経路遮断

        ルート傍受とは何ですか? 非常に一般的なシナリオを説明すると、Web サイトを開いたとき、Web サイトを閲覧したいとき、クリックして読むと、ログイン インターフェイスにジャンプします。ログインするとまたログイン画面が出てくる、ログインしても表示されない、読み飛ばすといきなりログインがブロックされる、普通に特定のページに入る時、どういう手段を使っているのか? 読み取りを続行する権限があるかどうかを確認するには. たとえば、ログイン時にトークンがあるかどうかを確認できます. ある場合は、トークンを傍受せずに読み取りを続行できます. ない場合は、それを傍受してログインインターフェイスにジャンプしますログインしてトークンを取得する 一般的な書き方を見てみましょう:

...
<script>
export default {
    mounted () {
        // 检查是否有token
        if (!localStorage.getItem('token') {
            this.$router.push('/login')
        })
    }
}
</script>

         明らかにこれで問題はありませんが、ベストではありません. チェックするページが多すぎる場合は、各コンポーネントにトークンがあるかどうかをチェックする必要があり、チェックする必要があるすべてを記述する必要があります. . このように、コードがたくさん繰り返されるだけでなく、 書きにくいのですが、何か良い方法はありませんか? はい、後述するのはルーティング ガードです。より頻繁に呼び出されますが、重要ではありません。

        ルーティングガードはグローバルガードとコンポーネント内部ガードに分かれており、非常に分かりやすいです.ほとんどのコンポーネントが入力前にチェックしてログインする必要がある場合は、グローバルガードを使用できます.ローカルまたは少数の場所の場合は、チェックとロギングが必要な場合は、コンポーネントの内部ガードを使用できます。次のように使用しましょう。

beforeEach - グローバル事前ルーティング

        http://localhost:8080/music が http://localhost:8080/music/kugou に切り替わった場合、ルートをインターセプトして確認し、/router/index.js にグローバル フロント ルートを記述する必要があります。

<!-- /router/index.js -->
...
const router = new VueRouter({
  mode: 'history',
  routes
})

router.beforeEach((to, from, next) => {
  // 拦截
  if (to.fullPath === '/music/kugou') {
    if (!localStorage.getItem('loginToken')) {
      console.log('请先登录')
    } else {
      next()
    }
  } else {
  // 放行
    next()
  }
})

export default router

効果をテストして実行します。

         複数のパスがある場合は、配列の形式で記述できます。

const auth = ['/music', '/order', 'monkey']
  if (auth.includes(to.auth)) {
    console.log('请先登录')
  } else {
    next()
  }

beforeRouteEnter —— コンポーネントの内部ガード

        次に、コンポーネント内でこの種のインターセプトが必要な場合は、コンポーネントの内部ガードを使用して、このルートに入る前にインターセプトをチェックできます: beforeRouteEnter

<!-- PlayView.vue -->
...
<script>
    export default {
        beforeRouteEnter (to, from, next) {
            if (!localStorage.getItem('loginToken')) {
              console.log('检查token')
            } else {
              next()
            }
        }
    }
</script>

        では、一部の初心者が質問する必要がありますが、マウントは利用できませんか? マウントされたライフサイクルが読み込まれ、コンポーネントガード beforeRouterEnter が使用されたときにコンポーネントインスタンスが作成されていない. ルートが切り替えられていない場合は、ログイントークンがあるかどうかを判断します. ログイントークンがない場合は、 loginToken がある場合は、次の () ルートを解放します。

もちろん、ルーティング ガードの内容について詳しく知りたい場合は、ここにアクセスしてください — 公式ドキュメント アドレス:ナビゲーション ガード | Vue ルーター

遅延読み込みのルーティング

        ルートの遅延読み込みについて話す前に、それが処理する一般的なシナリオについて話しましょう. いくつかの Web サイトを開いたことがありますか? Web サイトに入ると、ページは長時間読み込まれ、表示されていません。パッケージング後など、多くのファイルをロードしている. 一部の js、css ファイル、および一部の静的リソース。

         Web サイトが開くまでに時間がかかる場合があり、せっかちな人は叱り始めるかもしれません。Web サイトにアクセスするには「科学的なインターネット アクセス」が必要であると誤解している人もいますが、これはユーザー エクスペリエンスの低下につながります。通常のウェブサイト！

        アプリケーションをパッケージングしてビルドすると、JavaScript パッケージが非常に大きくなり、ページの読み込みに影響します.異なるルートに対応するコンポーネントを異なるコード ブロックに分割でき、ルートにアクセスしたときに対応するコンポーネントが読み込まれる場合、より多くの効率的！Vue の非同期コンポーネントと Webpack のコード分割機能を組み合わせると実現できます. 詳細については、こちらを参照してください: Routing lazy loading | Vue Router

         遅延読み込みをルーティングするために、以前に作成したコードを最適化しましょう。

元のコード:

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import KuGou from '../views/music/KuGou.vue'
import KuWo from '../views/music/KuWo.vue'
import Play from '../views/PlayView.vue'
import Login from '../views/LoginView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/music'
  },
  {
    path: '/music',
    component: Music,
    children: [
      {
        path: 'kugou',
        component: KuGou
      },
      {
        path: 'kuwo',
        component: KuWo
      }
    ]
  },
....

最適化 - ルートの遅延読み込み:

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
// import Music from '../views/MusicView.vue'
// import KuGou from '../views/music/KuGou.vue'
// import KuWo from '../views/music/KuWo.vue'
// import Play from '../views/PlayView.vue'
// import Login from '../views/LoginView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/music'
  },
  {
    path: '/music',
    // component: Music,
    component: () => import('../views/MusicView.vue'),
    children: [
      {
        path: 'kugou',
        // component: KuGou
        component: () => import('../views/music/KuGou.vue')
      },
      {
        path: 'kuwo',
        // component: KuWo
        component: () => import('../views/music/KuWo.vue')
      }
    ]
  },
....

コンポーネントはチャンクにグループ化されます 

ps:

  {
    path: '/music',
    // component: Music,
    component: () => import('../views/MusicView.vue'),
...


// 按组分块
{
    path: '/music',
    // component: Music,
    // component: () => import('../views/MusicView.vue'),
    component: () => import(/* webpackChunkName : "group-foo" */ '../views/MusicView.vue')

        次に、この記事の内容はここで終わります. ルーティングに関連する内容もこの記事で終わります. ルーティングに関連する前の内容を確認してください: 第 1 レベルのルーティング構成、宣言型ナビゲーション、ルーティング リダイレクト、ネストされたルーティング、プログラムによるナビゲーション、動的ルーティング、コマンド ルーティング、ルーティング インターセプト、およびルーティング レイジー ロード; 最初の 2 つのコンテンツ リンクを添付: 最後に、サポートに感謝します!