vue重定向beforeRouterEnter与replace的使用

2020-01-07 10:06:00

参考地址 beforeRouterEnter与replace的使用

这次使用beforeRouterEnter来判断是一定条件下才执行相应的页面跳转。

beforeRouterEnter:组件内路由,跟data,methods同级

 beforeRouteEnter (to, from, next) {    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
  },

需求场景:
  一个stuInfo页面,只有第一次才会出现,一旦出现过,以后再也不会出现,即使是输入该页面的url也不会跳转到该页面,只会跳转到指定的其他页面;

代码如下:

复制代码

beforeRouteEnter (to, from, next) {
      next(vm=>{        if(vm.profileCompleted){
          vm.nextReplace()
        }
      }),
methods: {
      nextReplace(){        this.$router.replace("/")
      }
}

复制代码

思路:

  在第一次进入stuInfo页面填写完信息提交成功后,把一个成功的状态存储到vuex中,上面代码中profileComplete就是这个状态,然后在该页面中通过beforeRouterEnter判断vuex中存储的状态来确定是不是第一次进入该页面,在beforeRouterEnter中不能使用this,只可以使用next函数中的实例来找到vue的实例拿取状态,要想跳转到其他地方就需要在methods中单独定义一个跳转的方法,通过next找到实例调用方法。


  • 2018-02-23 14:15:42

    mysql的取整函数

    ROUND(X) -- 表示将值 X 四舍五入为整数,无小数位 ROUND(X,D) -- 表示将值 X 四舍五入为小数点后 D 位的数值,D为小数点后小数位数。若要保留 X 值小数点左边的 D 位,可将 D 设为负值。

  • 2018-02-23 14:22:50

    mysql的yearweek 和 weekofyear函数

    例如 2010-3-14 ,礼拜天 SELECT YEARWEEK('2010-3-14') 返回 11 SELECT YEARWEEK('2010-3-14',1) 返回 10 其中第二个参数是 mode ,具体指的意思如下: Mode First day of week Range Week 1 is the first week … 0 Sunday 0-53 with a Sunday in this year 1 Monday 0-53 with more than 3 days this year 2 Sunday 1-53 with a Sunday in this year 3 Monday 1-53 with more than 3 days this year 4 Sunday 0-53 with more than 3 days this year 5 Monday 0-53 with a Monday in this year 6 Sunday 1-53 with more than 3 days this year 7 Monday 1-53 with a Monday in this year 2.

  • 2018-02-23 17:20:44

    Mysql数据库If语句的使用

    MySQL的if既可以作为表达式用,也可在存储过程中作为流程控制语句使用,如下是做为表达式使用:

  • 2018-02-24 10:16:36

    Java工具类之Apache的Commons Lang和BeanUtils

    Apache Commons包估计是Java中使用最广发的工具包了,很多框架都依赖于这组工具包中的一部分,它提供了我们常用的一些编程需要,但是JDK没能提供的机能,最大化的减少重复代码的编写。