最近在开发项目的时候,发现同事有需求是点击浏览器的返回,或者直接点击其他菜单跳走的时候,需求是想提醒一下用户,是否保存当前所编写的内容,当用户确定后,在去执行对应的跳转。
还有一个就是全局的对路由进行控制,一般都会写成 window.location.href
这种格式去阻止,或者重新对路由进行控制的问题,所以想写一篇文章总结一下
虽然 vue 的路由控制都是基于 HTML5 History API
的,但是在写项目的时候,还是比较推荐使用 vue 官方推荐的 vue-router 相关的技术
# 全局守卫
你可以使用 router.beforeEach 注册一个全局前置守卫:
例如你的项目结构是
roter /
|- index.js
你可以在你当前项目中的 router => index.js 中写入以下代码
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
to
: 是指路由下一步将要去的位置对象from
: 路由来自哪里的位置对象next
: 你的路由守卫中必须包含的一个函数,如果不执行next()
,将会出现不可预测的问题
# 组件内的路由守卫
有三种组件内的守卫
beforeRouteEnter
beforeRouteUpdate
(2.2 新增)beforeRouteLeave
主要说一下 beforeRouteLeave
这个,因为在项目中或许会经常用到的一个方法
beforeRouteLeave
是一个在当前路由,突然离开时触发的一个方法,例如当前你正在一个编辑界面,用户不小心点击了浏览器的返回,亦或者点击了菜单栏中其他菜单的导航,会执行该方法,
beforeRouteLeave
也拥有3个参数,与全局路由守卫的参数是一致的
beforeRouteLeave (to, from, next) => {
// 写入你想对用户说的内容
// 务必保证 next 方法是被触发的
}
举个🌰
beforeRouteLeave (to, from , next) {
const answer = window.confirm('你确定放弃当前编辑的界面并且离开吗?')
if (answer) {
next() // 执行默认操作,点击哪里去哪里
} else {
next(false) // 终止操作,不执行路由跳转
}
}
注意
beforeRouteLeave 只能在当前组件路由切换时才能去触发,不能写在当前界面下的子组件内
好了,🌰吃完了。
这是我在项目中遇到到的问题以及总结,当然更推荐你去官方系统的去查看对应的教程