Vee----ルーティングの理解

3506 ワード

Vee-ルーティングの理解
1.公式サイトからのルーティング例を理解する
公式サイトの例
https://router.vuejs.org/zh/guide/#html
ルーティングを自分で理解するのは簡単ですが、ルーティングはurlアドレスによって異なる内容やページを表示します.ルーティングといえば、最初に思いついたのがルーターですが、ルーターの動作原理は何でしょうか.ルータの機能は中継局であり、ネットワーク内のパケットを1つのルータを通じて転送する目的である.ルータはどのようにしてパケットの転送を実現しますか?実現原理:一人がどこかに行くと、必ず彼の頭の中に地図があり、ルータの内部にも地図があり、この地図がルーティングテーブルです.このルーティングテーブルには、ルータが把握しているすべての宛先ネットワークアドレスと、ルータを介してこれらのネットワーク内の最適なパスが含まれています.この最適なパスは、ルータのインタフェースまたは次のルータのアドレスを指します.したがって,JavaScriptにおけるルーティングも同様の原理を持つべきである.コードでルーティング機能を持つものを書き、JSコードを使ってルータの機能を実現することです.この公式サイトの例を簡単に分析してください.1)ルーティングコンポーネントの定義

    const Foo = {
        template:'foo
'
        };
    const Bar = {
        template:'bar
'
    }

2)ルーティングを定義し,各ルーティングは1つのコンポーネントに対応する.

const routes = [
        {
            path:'/foo',
            component:Foo,
        },{
            path:'/bar',
            component:Bar
        }
    ];

3)ルーティングインスタンスを作成routerインスタンスを作成し、routes(ルーティング)構成のものを渡す

const router = new VueRouter({
        routes:routes//     routes：routes
    })

4)ルートインスタンスを作成およびマウントするには、router構成パラメータ注入ルーティングを使用します.アプリケーション全体にルーティング機能を持たせる

    const app = new Vue({
        router
    }).$mount('#app')

理解は:あなたが行きたい場所で、それからルート(このルートは自分で作成する必要があります.routerインスタンスを作成することです)に行って地図を探して、地図の上で対応する住所によって、それからどの場所に行くかを導きます.次に、パスを渡すことで、対応するページに一致します.ルーティングはurlによって異なるページに一致するからです.マッチしたページが表示されます.つまり、ルーティングの出口です.つまり、地図を通じて場所を見つけました.すなわち,自分で作成したルーティングにより,異なる経路で異なるページを持つ目的を達成した.

<div id="app">
        <h1>hello apph1>
        <p>
            
            <router-link to="/foo">Go to Foorouter-link>
            <router-link to="/bar">Go to Barrouter-link>
        p>

        
         <router-view>router-view>
    div>

以上は自分で理解した簡単なルートで、指摘を歓迎します.

VUEのジッタ防止とスロットルの最適な解決策--関数式コンポーネント

Vue——精講VueRouter(1)