vue-router 钩子函数（路由拦截）

1、全局的钩子

beforeEach（to，from，next）
afterEach（to，from，next）

2、组建内的导航钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

methods: {},
beforeRouteLeave (to, from, next) {}

需要注意是：

beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this

beforeRouteEnter获取到this实例

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

最后是完整的导航解析流程：

1、导航被触发
2、在失活的组件里调用离开守卫
3、调用全局的 beforeEach 守卫
4、在重用的组件里调用 beforeRouteUpdate 守卫
5、在路由配置里调用 beforEnter
6、解析异步路由组件
7、在被激活的组件里调用 beforeRouteEnter
8、调用全局的 beforeResolve 守卫
9、导航被确认
10、调用全局的 afterEach 钩子
11、触发 DOM 更新
12、在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

---

路由拦截登录例子

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
const router = new Router({
 routes: [
 {
  path: '/',
  /*
  * 按需加载 
  */
  component: (resolve) => {
  require(['../components/Home'], resolve)
  }
 }, {
  path: '/record',
  name: 'record',
  component: (resolve) => {
  require(['../components/Record'], resolve)
  }
 }, {
  path: '/Register',
  name: 'Register',
  component: (resolve) => {
  require(['../components/Register'], resolve)
  }
 }, {
  path: '/Luck',
  name: 'Luck', 
  // 需要登录才能进入的页面可以增加一个meta属性
  meta: { 
  requireAuth: true
  },
  component: (resolve) => {
  require(['../components/luck28/Luck'], resolve)
  }
 }
 ]
})
// 判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
 if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
 if (localStorage.getItem('username')) {// 判断是否登录
  next()
 } else {// 没登录则跳转到登录界面
  next({
  path: '/Register',
  query: {redirect: to.fullPath}
  })
 }
 } else {
 next()
 }
})
 
export default router

当router的mode为history时，去掉#

router.beforeEach((route, redirect, next) => {
  let title = route.meta.title
  document.title = title || ''
  console.log(route.hash)
  if (route.hash !== '') {
    const id = route.hash.replace('#', '')
    const element = document.getElementById(id)
    if (element) element.scrollIntoView()
  }
  if (route.path !== '/') {
    indexScrollTop = document.body.scrollTop
  }
  next()
})
router.afterEach((route, redirect) => {
  if (route.hash !== '') {
    const id = route.hash.replace('#', '')
    const element = document.getElementById(id)
    if (element) element.scrollIntoView()
  }
  if (route.path !== '/') {
    document.body.scrollTop = 0
  } else {
    Vue.nextTick(() => {
      document.body.scrollTop = indexScrollTop
    })
  }
})

这样就做好了登录拦截.我们只需在main.js中引入router就可以了.