vueルーティングフックブロックbeforeEachおよびafterEachおよびページルーティング変化ルーティングリスニング

ルーティングがジャンプするときは、いくつかの権限判断や他の操作が必要です.このときはルーティングのフック関数を使う必要があります.
定義:ルーティングフックは主にユーザにルーティングが変化したときにいくつかの特殊な処理を行うために定義された関数である.
全体的にvueには3つのフックが提供されており、2つの関数1、グローバルフック2、あるルーティングのフック3、コンポーネント内のフック

    ：

1. router.beforeEach(function(to,form,next){}) /*       */

2. router.afterEach(function(to,form)}{}) /*       */

グローバルフック関数
名前の通り、グローバルに有効な関数です.

// router.js

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'sideBar',
      component: sideBar,
      children:[
        {
          path:'/',
          name:'sort',
          component:sort
        },
        {
          path:'/addNewSort',
          name:'addNewSort',
          component:addNewSort
        },
        {
          path:'/notSend',
          name:'notSend',
          component:notSend
        },
        {
          path:'/sended',
          name:'sended',
          component:sended
        },
    }
  ]
})

router.beforeEach((to,from,next)=>{
  // console.log("to:",to);      // router         
  // console.log("from:",from);  //            
  // console.log("next:",next);  // Function,          ，      ，         confirmed （   ）；   false，    。
  if(to.name=='notSend'){
    next({
      name:'sort'
    })
    return
  }
  next()
})

export default router

あるルーティングのフック関数
名前の通り、あるルーティングに書かれた関数であり、本質的にはコンポーネント内の関数と区別されません.

// router.js

const router = new VueRouter({

  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

ルーティングアセンブリのフック
以下のルーティングフックは、ルーティングコンポーネント内で直接定義できます.

// *.vue

beforeRouteEnter
beforeRouteUpdate (2.2   )
beforeRouteLeave

ここではフック関数の使い方を簡単に説明します.data、methodsと平レベルです.

beforeRouteLeave(to, from, next) {
    next()
},
beforeRouteEnter(to, from, next) {
    next()
},
beforeRouteUpdate(to, from, next) { //               
    next()
},
data:{},
method: {}

 
転載先:https://www.cnblogs.com/xiaoyaoxingchen/p/9537174.html