vue 2ルーティングガード(フック関数)

公式:vue-routerが提供するナビゲーションガードは、主にジャンプまたはキャンセルによってナビゲーションをガードするために使用されます.ルーティング・ナビゲーション・プロセスに植え込む機会は、グローバル、単一のルーティングがユニーク、またはコンポーネント・レベルです.
いわゆるVueルーティングナビゲーションガード、つまり私たちがよく言うライフサイクルフック関数、フック関数の意味は特定の時点で、Vueは自動的にこの方法をトリガーして、私たちはこれらのフック関数を通じて、いくつかの機能を実現することができて、例えば、いくつかのページはログインしてからアクセスすることができて、いくつかのページはユーザーがどんな等級に達してアクセスすることができて、あるいはページをジャンプしてからいくつかの情報を修正することができます.ルーティング・ナビゲーション・ガードによってブロックし、対応する処理を行うことができます.
グローバル・ガード:
routerインスタンスにマウント

グローバルフロントフック

注意:パラメータまたはクエリーの変更は、ナビゲーション・ガードの開始/終了をトリガーしません.$routeオブジェクトを観察することで、これらの変化に対処したり、beforeRouteUpdateのコンポーネント内ガードを使用したりすることができます.

router.beforeEach((to,from,next)=>{

        //to: Route:              

        //from: Route:            

        //next: Function:            ，      next()  ，           
})

公式next()の解釈:

next():パイプ内の次のフックを行います.すべてのフックが実行されると、ナビゲーションの状態はconfirmed(確認された)になります.

next(false):現在のナビゲーションを中断します.ブラウザのURLが変更された場合(ユーザ手動またはブラウザ後退ボタンの可能性があります)、URLアドレスはfromルーティングに対応するアドレスにリセットされます.

next('/')またはnext({path:'/'}):異なるアドレスにジャンプします.現在のナビゲーションが中断され、新しいナビゲーションが行われます.nextに任意の位置オブジェクトを渡すことができ、replace:true、name:'home'などのオプションとrouter-linkで使用するto propまたはrouterを設定することができます.pushのオプション.

next(error):(2.4.0+)nextに入力パラメータがErrorインスタンスである場合、ナビゲーションは終了する、エラーはrouterに伝達される.onError()に登録されたコールバック.

例を見てみましょう.

router.beforeEach((to,from,next)=>{
  if(to.matched.some((item)=>item.meta.login)){
    console.log(to)
    //router.app        
    let info = router.app.$local.fetch('miaov')
    // console.log(info)

    if(info.login){
      next()
    }else{
      router.push({
        path:'/login'
      })
    }
  }else{
    next()
  }
})

グローバルバックフック:

注意:これらのフックはnext関数を受け入れず、ナビゲーション自体も変更しません.

router.afterEach((to,from)=>{


})

ローカルフック関数
ローカルフック関数は、コンポーネントに対応するルーティング構成に書かれた2つの場所に書くことができます.1つは、コンポーネントに直接書かれたものです.
ルート固有のガード:
ルーティング構成でbeforeEnterガードを直接定義できます.

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

コンポーネント内のガード:

beforeRouteEnter

beforeRouteUpdata(2.2新規)

beforeRouteLeave

beforeRouteEnter(to,from,next){
        
        //            confirm   
        //        “this”
        //        ，         

}

beforeRouteEnterガードはthisにアクセスできません.ガードはナビゲーション確認前に呼び出されるため、間もなく登場する新しい構築はまだ作成されていません.
コンポーネントインスタンスには、nextにコールバックすることによってアクセスできます.ナビゲーションが確認されたときにコールバックを実行し,コンポーネントインスタンスをコールバックメソッドのパラメータとする.

  export default {
    data(){
      return {
          flag: ''
      }
    },
    watch: {
      $route(){
        this.flag = flags[this.$route.path.slice(1)]
      }
    },
    beforeRouteEnter(to, from, next){//   ，         ，     watch        
      next((vm) => {
        vm.flag = flags[to.path.slice(1)]
      })
    },
    components: {
      headerNav: Header

      /*(resolve) => {
        setTimeout(() => {
          resolve(require('@/components/header'))
        }, 2000)
      }*/
    }
  }

注意:beforeRouteEnterはnextへのコールバックをサポートする唯一のガードです.beforeRouteUpdateとbeforeRouteLeaveでは使用可能なので、コールバックの転送はサポートされていません

beforeRouteUpdate(to,from,next){
        //       ，           
        //        this
        
}

この関数はシーンを適用するのが特殊です.コンポーネントにサブナビゲーションがある場合、この親コンポーネントでこの方法を使用してサブルーティングのジャンプを監視し、親コンポーネントで対応する処理を行うことができます.beforeRouteUpdate()関数のほか、親コンポーネントでwatchを使用してルーティングの変化を監視することもできます.効果はそれほど悪くありません.実際の状況に応じてどの方式で処理すべきかを判断する
簡単な例を見てみましょう.

export default {
      data(){
       return{
         test:0
       }
      },
   //    
      watch:{
        $route(){
          this.test++
        }
      },
      beforeRouteEnter(to,from,next){
        //this  undefined，            
        next((vm)=>{
          vm.test++
        });//next           
      },
   /*     
      // beforeRouteUpdate(to,from,next){
      //   this.test++
      //   next();
      // },
   */
      beforeRouteLeave(to,from,next){
next();
      },
        name: "about"
    }

beforeRouteLeave(to,from,next){
        //               
        //        this
}

ガードを離れることは、通常、変更が保存されていない前にユーザーが突然離れることを禁止するために使用されます.このナビゲーションはnext(false)でキャンセルできます
参考記事:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html