Vue Router 路由导航钩子函数||API

导航守卫：全局守卫、路由独享的守卫、组件内的守卫

举例说明：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Parents from '@/pages/Parents'

Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/parents',
      name: 'Parents',
      component: Parents,
       //路由独享的守卫,可在路由配置上直接定义
      beforeEnter: (to, from, next) => {
      console.log('路由独享的守卫beforeEnter',3)
      next()
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  // if (to.name !== 'Child') {
  //   next()
  // } else {
  //   next(false)
  // }
   console.log('全局前置守卫router.beforeEach', 2)
    next()
  // if (from.name === 'Parents') {
  //   console.log('from')
  // }
  // //或者
  if (from.path === '/parents') {
    console.log('from')
  }
})


router.beforeResolve((to, from, next) => {
  console.log('全局解析守卫router.beforeResolve',5)
  next()
})


router.afterEach((to, from) => {
  console.log('全局守卫钩子router.afterEach',6)
})

export default router

组件内的守卫

<template>
  <div>
<p>parents</p>
  </div>
</template>
<script>
export default {
  data () {
    return {  }
  },
  methods: {
  },
  beforeRouteEnter (to, from, next) {
    // next(vm => {
    // // 通过 `vm` 访问组件实例
    // })
    console.log('被激活组件里beforeRouteEnter',4)
    next()
  },
  beforeRouteUpdate (to, from, next) {
    console.log('接着重复调用beforeRouteUpdate',666888)
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('失活组件里beforeRouteLeave',1)         
    next()
  }
}
</script>

导航被触发后，解析流程：

失活组件里beforeRouteLeave 1
全局前置守卫router.beforeEach 2
路由独享的守卫beforeEnter 3
被激活组件里beforeRouteEnter 4
全局解析守卫 router.beforeResolve 5
全局守卫钩子 router.afterEach 6

beforeRouteUpdate钩子函数被调用

Parents.vue被紧接着重复调用，传参分别是1、2

<template>
  <div id="app">
	  <router-link to="/">首页</router-link>
	  <router-link :to="{path:'parents',query:{id:1}}">Parents1</router-link>
	  <router-link :to="{path:'parents',query:{id:2}}">Parents2</router-link>
	  <router-view />
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

导航被触发后，解析流程：

全局前置守卫router.beforeEach 2
紧接着重复调用beforeRouteUpdate 666888
全局解析守卫router.beforeResolve 5
全局守卫钩子router.afterEach 6

再次调用，组件没有失活、被激活的概念。所以钩子beforeRouteLeave 、beforeRouteEnter 没有被再次调用，同时路由独享守卫beforeEnter 也没有被调用。

去Vue Router官网了解

欢迎留言指正！