vueルーティングプラグインのvue-route

vueルーティングプラグイン、vuer Routerは、vueの公式のルーティングを管理し、vueと高度に結合します.
　　1.vue-Routerの使用

import Vue from 'vue'
import Router from 'vue-router' //      

Vue.use(Router)

new Router({
  mode: 'history', //        hash  history    history  
  routes: [
  {
   path: '/',
   name: 'home',
   component: () => import(xxx.vue)
  },
  {
   path: '/about',
   name: 'about',
   component: () => import()
  }
 ]
})

　　2.ルーティングのジャンプ
　　　　 this.$router.push('/path') 　　　　this.$router.push({name:'routername'})
ルーティングのget方式伝値
　　　　 this.$router.push({name:'routername',query:{id:xxx}})
ルーティングのpost方式伝値
　　　　 this.$router.push({name:'routername',params:{id:xxx}})
　　3.ルートの後退
　　　　 this.$router.go(-1)　 　　　　this.$router.back()
　　4.ルートの前進
　　　　 this.$router.forward()　
　　5.現在のルーティングを置き換えると、ルーティング履歴には表示されません.
　　　　 this.$router.replace(location)
　　6.現在のルーティングのオブジェクトプロパティ(必ず小文字$routeであり、rがないことを覚えておいてください)
　　 　　this.$route.path現在のルーティングパスpath
　　　　 this.$route.name現在のルーティング名
　　　　 this.$route.params.id post方式のパラメータ伝達時にidの値を取得する
　　　　 this.$route.query.id get方式のパラメータ転送時にidの値を取得する
　　　　this.$route.hash現在のルーティングのhash値、帯域#
　　 7.linkActiveClass
現在アクティブなルーティングのclassクラス名、デフォルトは「router-link-active」
　　8.scrollBehavior　
ルーティングの切り替え時にページを特定の場所にスクロール
　　9.router-linkのtagラベル、具体的なラベルのhtml要素を生成します
　　10.router-viewルーティングコンポーネントが具体的にレンダリングされる場所
　　11.すべてのルーティングフック関数(ナビゲーショントップ)
　　　　11.1router.beforeEachグローバルフロントトップ
　　　　11.2router.beforeResolveグローバル解析ガード
　　　　11.3router.afterEachグローバルバックグラウンドガード
11.4 beforeEnterルーティングプライベートガード
コンポーネント内ガード
11.5 beforerouteEnterアクセス
11.6 beforerouteUpdate更新
11.7 beforerouteLeave離脱

/*        */
router.beforeEach(function (to, from, next) {
 // to         route
 // from       route
 // next        ，             
 console.log('      ')
 next()
})

/*        */
router.beforeResolve((to, from, next) => {
 // to         route
 // from       route
 console.log('      ')
 next()
})

/*        */
router.afterEach((to, from) => {
 // to         route
 // from       route
 console.log('      ')
})
/*        */
   beforeEnter(to, from, next) {
    console.log('       ')
    next()
   }

　beforeRouteEnter(to, from, next) {
  console.log('       ')
  next()
 },
 beforeRouteUpdate(to, from, next) {
  console.log('       ')
  next()
 },
 beforeRouteLeave(to, from, next) {
  console.log('        ')
  next()
 }

実行順序、
　　　　1.フロントアセンブリ内ガードが離れる
　　　　2.グローバルフロントガード
　　　　3.ルートガード
　　　　4.コンポーネント内ガード進入
　　　　5.グローバル解析ガード
　　　　6.グローバルバックグラウンドガード
または、コンポーネントをリフレッシュする場合(/aboutが/about?id=111にジャンプ)
　　　　1.グローバルフロントガード
　　　　2.コンポーネント内のガードの更新
　　　　3.グローバル解析ガード
　　　　4.グローバルバックグラウンドガード
まとめ
以上、編集者がご紹介したvueルーティングvue-routeのインスタンスコードですが、とてもいいです.参考になる価値があります.必要な友达は参考にしてください.