正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航（也就是路由拦截），一般用于访问某些页面的限制，如是否登录或者是否有权限等。
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收两个参数：
to: 即将要进入的目标from: 当前导航正要离开的路由
详情可以查看官方文档=>官方文档：导航首位|Vue Router
示例：
第一步，设置路由是否需要进行验证，true为需要，false为不需要。（@/router/index.js）
path: '/',
redirect: '/home',
name: 'home',
component: Index,
meta: {
requireAuth: true
// true为需要，false为不需要
}第二步，在登陆成功的时候，使用localStorage保存用户账号信息。（@/views/login.vue）
// 判断有无已保存账号信息
if (JSON.parse(localStorage.getItem('user') !== null)) {
localStorage.removeItem('user')
}
// 永久本地保存账号密码，用于自动登录
const user = {
id: username,
password: password
}
localStorage.setItem('user', JSON.stringify(user))第三步，退出登录时，删除保存的账号信息。（@/views/home.vue）
// 移除本地保存账号信息
localStorage.removeItem('user')第四步，在main.js中设置前置守卫，进行路由拦截。（@/src/main.js）
/** 前置导航守卫，用于进入router前判断是否已登录 */
router.beforeEach((to, from, next) => {
// 判断打开的router是否需要验证登录
if (to.meta.requireAuth) {
// 判断是否已登录
if (JSON.parse(localStorage.getItem('user')) !== null) {
// 正常跳转
next()
} else {
// 转回登录界面
next({path: '/login'})
}
} else if (JSON.parse(localStorage.getItem('user')) !== null) {
// 已登录情况下，拒绝去login页，跳转去主页面
next({path: '/'})
} else {
// 正常跳转
next()
}
})版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/106472.html
