Vue项目中判断路由跳转,离开当前页面进行提示

♡ 我坐在你的周围

  闻到空气中你的味道

像是掺了薄荷的酒

明明该清醒

却只是闻一闻便醉了

今天说说Vue项目中路由跳转问题,有点时候咱们页面 (pc) 数据特别多的情况下如果填写到一半的时候不小心退出了数据就丢失了,这样体验效果就很不好,所以进行就来解决一下这个问题

vue项目中有一个main.js文件 我呢就在这个文件夹中进行操作的,因为在这个页面注册的所有组件,原型上面的方法也都在这个页面上

废话少说,直接上代码

```

 var flag; // 首先定义一个开关

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

        if (to.path == '/game/aaaa' || to.path == '/game/bbbb') { // 当进入这个页面进行记录

            flag = true; // 改变信号

            next();

        } else {

            if (flag) { // 如果路由发生变化判断信号

                Vue.prototype.$confirm('您确定要退出此页面?', '提示', {

                    confirmButtonText: '确定',

                    cancelButtonText: '取消',

                    type: 'warning'

                }).then(() => {

                    next()

                    flag = false;

                })

            } else {

                next()

            }

        }

    });

```

我这里使用的 if 判断 其实可以写一个方法 然后封装一个函数 使用 swich case 进行判断然后函数调用

这里使用 vue-router 中的路由前置守卫 ,里面有三个参数 , 如果还不了解的朋友,就打印出来看看

next()在这里是一个函数 就是方法向下执行的一个方法

Vue.prototype这里由于知识忘记,一直使用this,然而在这里this指向并不是Vue 所以会报$confirm is    not defund这里使用Vue的原型就可以解决这个问题,

还有一个问题就是如果下一级页面是当前页面的子页面 涉及到传参问题 就不能使用 to方法下发fullpath,就得使用path可以打印出看看,问题顺利解决 soeasy!!

不明白的可以加我qq: 2489757828

我的私人博客 [李大玄](https://webldx.github.io)

**想穿越回过去告诉你，别着急，我一定要准时来爱你 !**