vue-routerの簡単な理解について話します

Vue RouterはVueです.js公式のルーティングマネージャ.Vueとjsのコア深度統合により、単一ページアプリケーションの構築が容易になります.以下の機能があります.

ネストされたルーティング/ビューグラフ

モジュール化コンポーネントベースのルーティング構成

ルーティングパラメータ、クエリー、ワイルドカード

はVueに基づく.js遷移システムのビュー遷移効果

細粒度のナビゲーション制御

自動アクティブCSS class付きリンク

HTML 5履歴モードまたはhashモード、IE 9で

を自動的に降格

カスタムスクロールバー動作

上はvue-router公式の紹介ですが、これから自分が普段使っているvue-routerに関する知識をまとめてみます.
vue-routerを使用する前に、まず彼をvue足場に統合します.
(注意:この説明の基礎は、vue-cliのセットをインストールしたことをデフォルトで設定することです)
vue-router取付npm install vue-router --savesrc/router/index.jsファイルに次のコードを書き込みます.

import Vue from 'vue'
import VueRouter from 'vue-router'

// vue   VueRouter
Vue.use(VueRouter);

//         

//      
import  comA  from '@components/comA'

//          （        ，                    ，           ，              ）
const comB = resolve=>require(['@components/comB'],resolve);



//          

const routes = [
    {
      path:'/',
      name:'home',
      component:home,
    },
    {
      path:'/about',
      name:'about',
      component:about,
      children:[
        {
            path:'aboutA' //      path:'/about/aboutA'
        },{
            path:'aboutB',
        }
      ]
    }
]

これが比較的簡単で比較的完全な構造であり,除去(パラメータとフック,後述)である.マッピング関係を書き終えてrouterインスタンスを作成し、マッピング関係を転送します.

    
    const router = new VueRouter({
        routes
    })
    
    //      ，           router    ，  
    
    router.beforeEach((to, from, next)=>{
        ...
        next();
    })

次にvue-routerのモードを見てみましょう
vue-routerのデフォルトではhashモードが使用されています.ルーティングがジャンプすると、#が多く、あまり美しく見えないので、history を使用することができます.このモードでは、history.pushState APIを十分に利用して、ページを再ロードすることなくURLジャンプを完了し、ユーザー体験を向上させます.しかし、www.root.com/home/page1に直接アクセスすると、ブラウザは本当にこのアドレスを要求し、バックエンドに関連する構成がなければ404に戻るので、気まずいので、バックエンドと協力しなければなりません.
パターンの基本的な様子は次のようです

    const router = new VueRouter({
        mode:"history",
        routes
    })

ルーティングパラメータ
一般ルートには2つのパスがあり、paramsとqueryに分かれています.まずparamsを見てみましょう.公式サイトの例を使いましょう.

const User = {
  template: '
{{$route.params.id}}
'
}

const router = new VueRouter({
  routes: [
    //             
    { path: '/user/:id', component: User }
  ]
})

コンポーネント内で$routeを使用すると、コンポーネントが高度に結合され、コンポーネントは特定のURLでしか使用できないため、柔軟性が制限されているため、propsを使用してデカップリングすることができます.

const User = {
    props:['id'],
    template:`
{{id}}
`
}

const router = new VueRouter({
    routes:[
        {
            path:'/user/:id',
            component:User,
            props:true
        },
        
        //           ，                props   ，  
        {
            path:'/user/:id',
            components:{default:User,sidebar:SideBar},
            props:{default:true,sidebar:false}
        }
    ]
})

これにより、コンポーネントの柔軟性が大幅に向上し、再利用とテストが容易になります.
paramsとqueryqueryはこのように使われています

    
    //  
    this.$router.push({
        name:'home',
        query:{
            id:id
        }
    })
    
    //    
    
    this.route.query.id
    

paramsはqueryとよく似ています

    
    //  
    this.$router.push({
        name:'home',
        params:{
            id:id
        }
    })
    
    //    
    
    this.route.params.id
    

ここで注意すべき点は、paramsを使用する場合、pathを使用することはできません.params自体がpathダイナミックパスの構成要素であるため、矛盾が発生します.
一貫性を保つためにqueryとparamsがパラメータを渡す場合は,できるだけnamaを用いて区別する.
パラメータの位置は一般的にthis.$router.pushとrouter-linkのうちのtoのパラメータタイプがそっくりです.次のように

    
    //   
    
    this.$router.push("/home");
    
    {
        name:"home",
        path:'/home/:id',
        componet:Home
    }
    
    

以上、toとthis.$router.pushのパラメータについてずっと説明しています.次に、システムについて見てみましょう. です.
ルーティングフック
グローバルルーティングフックbeforeEach and afterEach

    const router = new VueRouter({
        ...
    })
    //      ，      ，       ，         router  ，     
    
    router.beforeEach((to, from, next)=>{
        // to          
        // from       
        // next()     
        // next(false)        ，                  ，    
        //next('/')    next({name:"home",params:{}})
    })    
    
    router.afterEach((to,from)=>{
        ...
        //      ，    next
    })
    

ルーティングマッピング関係のフックbeforeEnter and afterEnter

  const router = new VueRouter({
      routes:[
        {   name:home,
            path:'/home',
            component:Home,
            beforeEnter:(to,from, next) =>{
                ...
            },
            afterEnter:(to, from)=>{
                ...
            }
        }
      ]
  })

基本的にはグローバルルーティングフックの使い方と同じです
アセンブリ内のフックbeforeRouterEnter and beforeRouterUpdate (2.2 add) and beforeRouterLeave

    
    export default{
        data(){
            return {
                ...
            }
        },
        beforeRouterEnter (to, from, next){
            //        ，      ，        ，          this 
        },
        beforeRouterUpdate(to,from,next){
            //         ，    /home/:id         ，  id   ，            ，     
            //          ，  ，this      
            
        },
        beforeRouterLeave(to,from,next){
            //                 
            //    this
        }
    }
        

これは私がvueルートに対して、いくつかの理解と総括で、ちょうど入門したばかりの友达を助けることができることを望んで、いっしょに努力して、文章を書くことを堅持して、未来は明るいです