关于vue路由离开当前页面进行confirm提示,使用beforeRouteLeave实现

代码

beforeRouteLeave: function(to, from , next){
        next(false)
        this.$confirm('您将离开本页面,是否进行数据保存?', '提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sure();
          next()
        }).catch(() => {
          next()
        });
     }

参数解释:
to: Route: 即将要进入的目标 路由对象

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

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

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

  1. next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  2. next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  3. next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved

就像vue的生命周期一样编写就可以了

作用:路由离开当前页面的时候触发

引发相应问题

返回上一页的go(-1)会出现问题
解决方法: 将模式改为history就可以了

### Vue.js 监听路由变化的方法 #### 使用 `watch` 函数监听 `$route` 在 Vue 3 中,可以利用组合 API 和 Composition API 来监听路由的变化。具体来说,通过引入 `watch` 及 `useRoute` 这两个来自不同库的功能——者出自核心 Vue 库,后者则属于 vue-router 插件[^1]。 ```javascript import { watch } from &#39;vue&#39;; import { useRoute } from &#39;vue-router&#39;; export default { setup() { const route = useRoute(); // 监视当路径对象(route),一旦发生变化即触发回调函数 watch( () => route.fullPath, (to, from) => { console.log(`导航至 ${from.path} 到达新页面 ${to}`); }, { immediate: true } ); return {}; } }; ``` 此代码片段展示了如何设置一个观察者来跟踪用户的浏览行为,并可以在每次访问新的 URL 地址时记录下旧地址与新地址的信息。 #### 使用 Vue Router 钩子函数 除了上述方式外,还可以借助于 Vue Router 提供的导航守卫来进行更细粒度的操作。这些钩子提供了三个阶段性的切入点:进入 (`beforeEach`)、更新时 (`beforeRouteUpdate`) 和离开时 (`beforeRouteLeave`) [^3]。 对于单个组件而言: - **`beforeRouteEnter`**: 组件渲染之调用;此时无法获得 this 上下文。 - **`beforeRouteUpdate`**: 当在同一组件实例中重新加载同一页面的不同参数时被激活。 - **`beforeRouteLeave`**: 用户正准备离开该组件对应的页面时触发。 下面是一个简单的例子展示怎样定义这些生命周期钩子: ```javascript // 定义在一个单独文件里或者直接写入组件选项配置项之中 const MyComponent = { template: &#39;<div>My Component</div>&#39;, beforeRouteEnter(to, from, next) { // 此处不能访问this next(vm => { vm.loadInitialData(); }); }, beforeRouteUpdate(to, from, next) { this.updateViewBasedOnParams(to.params); next(); }, beforeRouteLeave(to, from, next) { if (!confirm(&#39;Are you sure?&#39;)) { next(false); } else { next(); } } } ``` 这种方法非常适合处理那些依赖于特定条件才能完成的任务,比如权限验证或数据预取等场景。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值