路由的导航守卫

1.什么是导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。通俗点讲就是一个拦截器。

2.导航守卫分类

全局守卫

beforeEach(全局前置)、beforeResolve(全局解析)、afterEach(全局后置)

(在路由实例对象注册使用,写在main.js中)

代码举例(结合sessionStorage实现登录拦截):

router.beforeEach( (to,from,next) => {

console.log('-----全局前置守卫.');

let path = to.path;

console.log("--------path = "+path);

let ckLogin = false; // 检查是否登录

if( sessionStorage.getItem("userinfo") ){

ckLogin = true;

}

//

if( true ){

next(); // 放行

}else{

next("/login");

}

} );

路由守卫

beforeEnter(在路由配置项中项定义,写在路由js中)

代码举例(只拦截固定的路径):

{

path: '/test4',

name: 'Test4',

component: () => import('../views/test4.vue'),

beforeEnter:(to,from,next) => {

console.log("-----路由守卫 test4");

next();

}

}

组件守卫

beforeRouteEnter(进入vue页面)、beforeRouteUpdate(vue页面修改)、beforeRouteLeave(vue页面离开)

(在组件属性中定义,写在vue页面中)

代码举例(离开vue页面时提示):

export default {

name: 'Test6',

data () {

return {

key: '测试-路由6',

id:0,

title:''

}

},

beforeRouteLeave(to,from,next){ // 组件守卫-离开组件

let ck = confirm('是否离开?');

if(ck){

next();// 放行

}else{

next(false) ; // 拦住

}

}

}

3. 参数解释

具体

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }),

next({ name: 'login', params: { path: route.path } }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

注意

全局后置守卫(afterEach),是没有 next 的,因为到这以及完全结束没法跳了。

相关推荐
打小就很皮...9 分钟前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序
集成显卡1 小时前
PlayWright | 初识微软出品的 WEB 应用自动化测试框架
前端·chrome·测试工具·microsoft·自动化·edge浏览器
前端小趴菜052 小时前
React - 组件通信
前端·react.js·前端框架
Amy_cx2 小时前
在表单输入框按回车页面刷新的问题
前端·elementui
dancing9992 小时前
cocos3.X的oops框架oops-plugin-excel-to-json改进兼容多表单导出功能
前端·javascript·typescript·游戏程序
后海 0_o3 小时前
2025前端微服务 - 无界 的实战应用
前端·微服务·架构
Scabbards_3 小时前
CPT304-2425-S2-Software Engineering II
前端
小满zs3 小时前
Zustand 第二章(状态处理)
前端·react.js
程序猿小D3 小时前
第16节 Node.js 文件系统
linux·服务器·前端·node.js·编辑器·vim
萌萌哒草头将军3 小时前
🚀🚀🚀Prisma 发布无 Rust 引擎预览版,安装和使用更轻量;支持任何 ORM 连接引擎;支持自动备份...
前端·javascript·vue.js