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-01-01 10:50:49

    仿QQ长按弹出功能菜单

    android app普遍常用的弹出上下文菜单是列表式的。QQ列表,在上方弹出冒泡效果菜单,如图

  • 2018-01-02 16:16:00

    Navicat 全版本破解工具

    Navicat是一套快速、可靠并价格相当便宜的数据库管理工具,专为简化数据库的管理及降低系统管理成本而设。它的设计符合数据库管理员、开发人员及中小企业的需要。Navicat 是以直觉化的图形用户界面而建的,让你可以以安全并且简单的方式创建、组织、访问并共用信息。