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可以打印出看看

Logo

前往低代码交流专区

更多推荐