beforeRouteLeave路由守卫，退出页面时弹窗提示

最新推荐文章于 2024-05-09 08:38:30 发布
最新推荐文章于 2024-05-09 08:38:30 发布
阅读量4.6k 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42760581/article/details/104696051
版权

在这里插入图片描述
最近做了一个需求，退出页面时提示退出确认弹窗，用到了VUE的beforeRouteLeave

实现步骤
在这里插入图片描述
这里用到了vant组件库的Dialog弹窗
需要注意的是，我在这里定义了一个backConfirm布尔值，默认为true，是因为考虑到如果这个页面有提交按钮，在提交成功后，会进行页面跳转，为了防止在这时出现退出确认弹窗，我们只需要在提交成功后，把backConfirm赋值为false即可。

hello_kking
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
beforeRouterLeave 被触发两次
ZF的博客
09-11 3698
场景：beforeRouterLeave 函数里面有个确认框方法，离开页面前会弹出让用户确认是否离开当前页面，但是有时候点击确认后还会再次弹出确认框。 看到网上说给确认框加上延时函数能解决问题，实践下确实能解决。 但不知道是什么原因导致这个问题，于是检查操作流程，发现弹出两次确认框的情况下，确认框弹出前路由改变了（不应该改变啊），于是去看Vue 文档，检查相关代码发现在 beforeRouterLeave 函数里面使用 next() 方法来实现路由跳转，但项目使用 router.push() 来实现，全部换
vue导航守卫beforeRouteLeave浏览器返回时，自定义弹窗提醒用户保存信息
ximenxiafeng的专栏
01-27 990
H5页面中经常会遇到的情况，当前页面点击返回，想要提示弹窗"是否确认离开当前页面"之类的需求。自己试着看了一下网上的方法，大多是alert出系统弹窗。其实要实现自定义弹窗提示，也是很容易的。 从另一个页面点击跳转到当前页（如下），点击浏览器返回按钮，则会弹窗下面的弹窗，点击弹窗确定按钮，页面返回上一页 完整代码 <template> <div class="templ"> <div>123</div> <div c.
vue3 离开页面弹窗确认
最新发布
柒个橙子的博客
05-09 385
在订单支付页面倒计时没结束就离开当前页时期望弹窗提示是否确认离开。
vue2.0 实现导航守卫（路由守卫）
濮家大少
01-02 270
路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。 对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。 导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。 贴上文档地址：https://router.vuejs.org/zh-cn/advanced...
vue 退出编辑页的保存提示,同时解决beforeRouteLeave 和 浏览器的前进后退的闪现冲突（hash模式有此问题，history模式下正常）
知之为知之，不知为不知
10-18 1588
export default { data() { return { dataIsChange: 0, // 计数器，据此判断表单是否已编辑 noLeaveprompt: false, // 表单提交后，设置为true，据此判断提交不再弹出离开提示 form: { // 表单数据 menuname: '', // 菜单名称 ...
Vue 路由钩子函数（路由守卫）使用详解、页面后退传参、离开页面询问保存
林中明月间丶
10-12 2777
1. 什么是路由守卫?路由守卫也叫路由钩子函数, 它是在路由跳转过程中调用的函数, 通过路由守卫可获取路由信息和阻止路由跳转2. 有哪些路由守卫?路由守卫有以下三种（6个）:组件内的路由守卫: beforeRouteEnter() beforeRouterUpdate() beforeRouteLeave()全局路由守卫: beforeEach() afterEach()单个路由守卫: beforeEnter()3. 路由守卫有哪些参数, 作用是什么?
Vue3 中 导航守卫 的使用
weixin_62897746的博客
02-11 1万+
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。 导航守卫可分为：全局前置守卫、全局解析守卫、全局后置守卫、路由独享的守卫、组件内的守卫
vue路由守卫,限制前端页面访问权限的例子
10-16
今天小编就为大家分享一篇vue路由守卫,限制前端页面访问权限的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uni-simple-router实现简单的路由守卫
04-21
总结一下，uni-simple-router提供了一套完善的路由管理系统，其中的路由守卫功能可以帮助我们精确控制页面的跳转流程，确保应用的安全性和用户体验。学习和掌握路由守卫的使用，对于提升uni-app应用的开发效率和质量...
详解Angular路由之路由守卫
08-27
在配置路由时，我们可以使用 canActivate 属性来指定路由守卫。例如： ``` const routes: Routes = [ { path: 'product/:id', component: ProductComponent, canActivate: [LoginGuard] } ]; ``` 六、路由...
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
08-27
在网站中普遍会遇到这样的需求，路由跳转前做一些验证，比如登录验证（未登录去登录页）。下面脚本之家小编给大家带来了使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能，感兴趣的朋友一起看看吧
Vue路由守卫及页面登录权限控制的设置方法
01-08
Vue路由守卫及页面登录权限控制的设置方法①先在我们的登录页面存储一个登录数据② 添加路由守卫方法一： 直接在路由中添加方法二：当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to,...
路由导航守卫
weixin_51614564的博客
07-10 135
vue -router 提供的导航守卫主要是用来通过跳转或取消的方式守卫导航。1.全局的前置守卫beforeEach是在导航出发时会被回调的： （1）拿到router对象 （2）在登录页面绑定一个事件，如果客户登录成功了，就立即把登录信息缓存起来 （3）在导航守卫判断用户是否登录进行拦截 （4）else可写 ，可不写，默认该往哪跳就往哪跳...
使用导航守卫保护 Vue 路由
lio-zero 的博客
03-28 152
Vue Router 中的守卫主要分为三类：全局守卫、路由守卫和组件守卫。 当触发任何导航时(即 URL 更改时)，会调用全局守卫； 当调用关联路由时(即 URL 匹配特定路由时)，会调用每个路由守卫； 当创建、更新或销毁路由中的组件时，会调用组件守卫。 在每个类别中，都有额外的方法，可以让您更细粒度地控制应用程序路由。下面是 Vue 路由器中每种导航保护类型中所有可用方法的快速分解。 以下...
beforeRouteLeave
热门推荐
静静的博客
04-08 2万+
有个需求：跳转到指定页面时再返回当前页面时保留之前搜索数据 否则清空搜索条件 用到了beforeRouteLeave 记录下来 beforeRouteLeave(to, from, next) ： 离开路由之前执行的函数,可用于页面的反向传值，页面跳转。 beforeRouteLeave (to, from, next) { this.$log.info(to, from,'route...
vue使用beforeRouteLeave实现路由的监听，在跳转前出现确认弹窗
wytraining
08-02 4058
vue实现路由的监听，在跳转前出现确认弹窗
vue router 组件内导航守卫 beforeRouteLeave用法，离开界面提示未保存
LPretty_Boy的博客
05-20 4596
1.在methods外面添加beforeRouteLeave方法 beforeRouteLeave(to, from, next) { console.log('beforeRouteLeave come in'); if(this.isSaved === false){ setTimeout(()=>{ this.$confirm('您还未保存页面内容，是否保存当前更改?', '提示', {
Vue入门【十一】-- 导航守卫与路由模式
qq_48802092的博客
10-04 1051
路由的两种模式及其区别？ hash模式：会在路由路径携带#，不会请求服务器，工作原理是hashchange事件,支持低版本浏览器 history模式：不会在路由路径携带#，会请求服务器，工作原理是go/back/ forward，是h5新增的api，不支持低版本浏览器。
vue 路由守卫 当页面没有Token时 跳转 登录页 代码
09-02
### 回答1： 当检测到页面没有Token时，可以使用Vue路由守卫来实现跳转到登录页面，具体代码如下：router.beforeEach((to, from, next) => {if (!token) {next({ path: '/login' })} else {next()}}) ### 回答2： 在Vue中，可以通过路由守卫来控制页面的访问权限。当页面没有Token时，可以通过路由守卫来自动跳转到登录页。 首先，需要在项目中安装vue-router，可以使用以下命令进行安装： ``` npm install vue-router ``` 然后，在路由配置文件中设置路由守卫。假设登录页的路由路径为"/login"，可以在全局前置守卫中判断页面是否有Token，如果没有，则自动跳转到登录页。代码如下： ```javascript // 导入Vue和Vue-router import Vue from 'vue' import VueRouter from 'vue-router' // 安装Vue-router Vue.use(VueRouter) // 创建路由实例 const router = new VueRouter({ // 路由配置 routes: [ // 其他页面的路由配置 ... { path: '/login', component: Login } ] }) // 全局前置守卫 router.beforeEach((to, from, next) => { // 判断是否有Token const token = localStorage.getItem('token') // 假设Token保存在localStorage中 if (token) { // 有Token，允许访问页面 next() } else { // 没有Token，跳转到登录页 next('/login') } }) // 导出路由实例 export default router ``` 在上述代码中，我们在全局前置守卫中判断是否存在Token，如果存在，可以访问页面，如果不存在，会跳转到"/login"页面。 当访问其他需要权限的页面时，会先经过全局前置守卫，根据Token的存在与否执行相应的跳转逻辑。 ### 回答3： Vue路由守卫是一种在导航过程中控制页面访问权限的方法。当我们使用Vue框架开发前端应用时，可以通过路由守卫来监测用户是否具有正确的登录凭证（如Token），如果没有，则可以将用户重定向到登录页。 下面是一个简单的示例代码，展示了如何使用Vue路由守卫来实现上述功能： 在main.js文件中，我们需要引入Vue和Vue Router，并创建一个Vue实例，并使用Vue Router配置路由。 ``` import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) // 定义路由 const routes = [ { path: '/login', component: Login }, { path: '/dashboard', component: Dashboard } ] // 创建路由实例 const router = new VueRouter({ routes }) // 添加路由守卫 router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') // 假设我们的Token存在localStorage中 // 如果用户访问的是登录页，则直接放行 if (to.path === '/login') { next(); } else { // 如果用户已经登录，则继续导航 if (token) { next(); } else { // 如果用户没有登录，则跳转到登录页 next('/login'); } } }) // 创建Vue实例并挂载Router new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在上述代码中，我们首先定义了两个路由，一个是登录页（Login），一个是仪表盘页（Dashboard）。然后根据用户是否具有Token来控制页面访问权限，在beforeEach导航守卫中进行判断。如果用户访问的是登录页，则直接放行，否则再判断用户是否已经登录。如果用户已经登录，则继续导航到目标页面，否则将用户重定向到登录页。 这样，当页面没有Token时，就会自动跳转到登录页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值