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