VUE返回上一层时对当前逻辑判断

2020-01-16 14:39:51

在移动端VUE项目中，默认有返回上一层的功能，例如安卓手机的左上角返回按钮。

当我们需要在返回上一级之前进行某些函数判断时，可以借助beforeRouteLeave 进行判断。

 具体作法：


beforeRouteLeave(to,from,next) {
 
       if (this.btnColorChange==false){
          MessageBox.confirm('',{
                   title:'确定要退出调查?退出将不保存答题记录',
                    cancelButtonText:'暂不',
                     confirmButtonText:'退出'
               })
               .then(action=>{
                   //退出
                  //  this.$router.push('/surveytest')
                  next()
               })
       }else {
         next()
       }
     		   
		    
     	},

这样就实现了在移动端退出当前页面返回上一级的时候进行了判断。其中的next()指向的就是判断执行后的上一级。



  • 精彩推荐

  • 2019-12-30 10:17:21

    router-link传递参数，query

    在vue-router中，有两大对象被挂载到了实例this； $route（只读、具备信息的对象）； $router（具备功能的函数） 查询字符串： 去哪里 ？ <router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

  • 2019-12-30 16:48:41

    vue provide/inject详解和用法

    父子组件交互方式多种，props、vuex、 、 emit、localStorage还有就是这个provide/inject了。它适合层级比较深的组件，比如子，子孙，子孙后代的组件有好几个用到父组件的某个属性，就可以用到这个provide/inject,它可以避免写大量繁琐的传值代码 我这里为什么要使用它？ 我一个知识库详情父组件中包含了大量的子组件，每个子组件都需要父组件的知识库ID,这时候我不想写大量props，就用到provide/inject进行传值了

  • 2020-01-03 00:36:00

    break和continue详解for循环

    1. break：直接跳出当前循环体（while、for、do while）或程序块（switch）。其中switch case执行时，一定会先进行匹配，匹配成功返回当前case的值，再根据是否有break，判断是否继续输出，或是跳出判断（可参考switch的介绍）。 2. continue：不再执行循环体中continue语句之后的代码，直接进行下一次循环。