vue-router 提供的导航守卫只要用于咋导航的过程中重定向或者取消路由，或者添加权限验证、数据获取等业务逻辑。导航守卫分为三类：全局守卫、路由独享守卫、组件内守卫，可以用于路由导航过程中的不同阶段。
全局守卫
全局守卫分为全局前置守卫、全局解析守卫和全局后置钩子。
当一个导航触发时，全局前置守卫按照创建的顺序调用。守卫可以是异步解析执行，此时导航所有守卫解析完之前一直处于挂起状态。
全局前置守卫使用router.beforeEach注册，代码如下：
在 index.js 里面注册
router.beforeEach((to,form,next)=>{ next()})
复制代码
路由有三个参数：to、from、next；
to：表示即将进入的目标路由对象
from：表示当前导航正要离开的路由对象
next：是一个函数对象，必须调用该函数在哪解析钩子
next（）：调用该函数，一个 next（）调用一次
全局解析守卫使用router.beforeResolve注册。他和router.beforeEach类似，区别在与，在导航被确认之前，在所有组件内守卫和异步路由组件被解析之后，解析守卫被调用
router.beforeResolve注册，代码如下：
router.beforeResolve((to,from,next)=>{ })
复制代码
全局后置钩子使用router.afterEach注册，他在导航被确认之后调用，与守卫不同的是，全局后置钩子不接受 next 函数，也不会改变导航
router.afterEach注册，代码如下：
router.afterEach((to,from)=>{ })
复制代码
演示代码：
index.js 代码
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes})
router.beforeEach((to, form, next) => { if (to.path == '/login') { next() } else { if (sessionStorage.isLogin == true) { next() } else { next({ path: '/login', query: { redirect: to.fullPat } }) } } }
)
复制代码
注意路由守卫一定要写在
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes})
复制代码
后面
login.vue 代码
<template> <div> <h1>{{info}}</h1>
<p><label>用户名：</label> <input type="text" v-model.trim="username"></p> <p><label>密码：</label> <input type="password" v-model.trim="password"></p> <input type="submit" value="登录" @click.prevent="login"> </div></template><script>export default { data() { return { username: '', password: '', info: '' } }, // 方法 methods: { login() { if ('hgk' == this.username && '123456' == this.password) { sessionStorage.setItem('isLogin', true) this.info = '' if (this.$route.query.redirect) { this.info = redirect = this.$route.query.redirect console.log(redirect) this.$router.replace(redirect) } else { this.$router.replace('/') } } else { sessionStorage.setItem('isLogin', false) this.username = '' this.password = '' this.info = '用户名或者密码错误' } } }}</script>
复制代码
评论