浅入深出Vue:ルーティング

ルーティングの概念のコンピュータ業界における歴史は、OSIモデルにおけるデータリンク層とネットワーク層の定義にさかのぼることができる.ここでの定義は、パケットを転送する際に、パケットの宛先アドレスに基づいてアドレスし、指定された宛先にパケットを送信することを意味する.
Web開発においても同様にルーティングの概念が存在し,様々なフロントエンドmvmフレームワークが出る前にバックエンドに普遍的に存在する.通俗的には[module/]controller/actionの組合せであり、urlを指定されたactionにマッピングして処理する.現在,フロントエンドにもルーティングという概念が存在する.
なぜルーティングが必要なのか
従来のフロントエンド開発では、ルーティングという概念は一般的に存在せず、このようにして問題が発生している.

フロントエンドは離散的で、独立してはいけません(静的ページを除いて、コンテキストは必要ありません).

バックエンドのフロントエンドから離れて完全なシステムを構築することはできません.もちろん、優れた案もあります.

単一ページアプリケーションajax制御domノードおよび動的変更ページ内容

を採用
などなど.
しかし,ルーティングという概念がない場合,フロントエンドは確かに柔軟ではなく,ページをジャンプする際に随所に見られるパスハードコーディングであることは否めない.urlは物理パスです.
フロントエンド開発を充実させるため,後のフレームワークではルーティング,コントローラ,ビューなどのバックエンド概念を導入した.成熟したものを参考にして自分を改善するのは、非常に便利な方法です.
したがって,現在のフロントエンド開発ではルーティングも不可欠な一環となっている.多くの人がその概念に振り回されて、私たちに撫でて、その正体を見てみましょう.
ルートは何ですか
フロントエンドのルーティングはよりよく理解されます.vueの例として、vue-routerはurlを解析し、指定したcomponentにマッピングしてレンダリングする.したがって、ここでは、vueのルーティングについて、一般的で狭義の定義を与えます.

urlは、特定のコンポーネントインスタンスに対応する.

ルーティングはurlを解析し、このurlに一致するコンポーネントがレンダリングされているかどうかを確認します.
ルーティングの使用方法vueでは、3つのステップに分けられます.
1.vue-routerアセンブリを取り付けます.package.jsonがインストールされているかどうかを確認できます.なければ取り付けてください.vue-routerでは、左側のパネルの依存関係に直接表示され、キーでインストールされます.
2.vue-cli 3.x使用vue-routerでグローバルに導入します.

import Router from 'vue-router'

Vue.use(Router)

3.ルーティングの定義
このステップでは、ルーティングを定義します.
つまり、どのurlをどのコンポーネントに解析するか、公式の例を見てみましょう.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

例のmain.js配列には、以下のルーティングを定義するルーティングオブジェクトがあります.

urlはルート、すなわちサーバwebアドレスに対応する.

このルーティングの名前はroutesであり、ルーティングの名前はルーティング間のジャンプで使用することができるが、一意であることを保証しなければならない.

このルーティングに対応するコンポーネントはHelloWorldコンポーネントであり、このコンポーネントは3行目のコードに導入される.

以上の3点も1つのルーティングオブジェクトを定義する基本要素であり,2点目は必須ではない.
サブルートの定義HelloWorldのルートがありますが、localhost/のルートを追加したら?

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [
          {
              path: 'login',
              name: 'Login',
              component: Login
          }
      ]
    }
  ]
})

対応するルーティングオブジェクトの下にlocalhost/login配列を追加するだけでよく、配列内のオブジェクトのchildrenは相対ルーティングを記入するだけでよい.ここの例では、pathコンポーネントが実装されても、予想される効果は見られません.
もう一つ注意しなければならないことがあります.

サブルーティング/ネストルーティングの場合、サブルーティング/ネストルーティングを階層的にレンダリングするには、その上位ルーティングオブジェクトのテンプレートにLoginコンポーネントを追加して、をレンダリングし続ける必要があります.

コード:

多くの子供靴はここに引っかかっています.もう一つの書き方があります.

マルチレベルルーティングもこのように定義されています.
ルーティング間のジャンプvue-routerが導入された後、vue-routerのインスタンスは、コンポーネント内で次の文を使用して取得することができる.

this.$router

//       ,          localhost/login
this.$router.push('/login')

//       ,             localhost/login
this.$router.push({ name : 'Login' })

//        
this.$router.push({
    path: '/login',
    query: {
        username: 'xxx',
    }
})

//          
this.$router.push({
    name: 'Login',
    params: {
        username: 'xxx',
    }
})

上記パラメータ付きジャンプの例では、注意すべき点として、

vue-routerジャンプを使用する場合、パラメータはpathのみ使用でき、query

は使用できません.
つまり、次のコードではパラメータが正常に伝達されません.

this.$router.push({
    path: '/login',
    params: {
        username: 'xxxx',
    }
})

ビューでは、次のコードを使用してジャンプできます.

login

ポイント:

は、paramsのパラメータであるも、this.$router.pushのrouter-linkのパラメータであっても、ルーティングオブジェクト

であるもよい.
それを覚えておけば、好きなように遊ぶことができます.
最後に書く
ルーティングというデモデモンストレーションはありません.ルーティングという部分はもっと実践と結びつけて勉強したいなら、実戦を利用して勉強したほうがいいからです.
そこで,ルーティングの概念と基本的な使い方,および使用中によく見られるいくつかの問題についてのみ述べた.
私たちは入門編でよくそれを使用して、もっと多くの機会がそれを深く理解することができて、深い編もそれに対してもっと深い理解を行います:どのように自動化してルートを生成します.