vue-router 钩子函数（路由拦截)，判断用户是否登录，未登录拦截

野性酷女 2022-01-29 13:23 366阅读 0赞

**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就可以了.