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

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