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找到实例调用方法。

巴特西

beforeRouterEnter与replace的使用

最新文章

热门文章