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


  • 2020-03-06 22:28:05

    git中submodule子模块的添加、使用和删除

    执行成功后,git status会看到项目中修改了.gitmodules,并增加了一个新文件(为刚刚添加的路径) git diff --cached查看修改内容可以看到增加了子模块,并且新文件下为子模块的提交hash摘要 git commit提交即完成子模块的添加

  • 2020-03-09 21:34:48

    Android TV 包安装成功后找不到启动图标

    生成APK文件,用U盘插入到小米盒子上,然后点击安装,提示安装成功。 可是找不到启动图标,安装成功的弹窗也没有打开的选项。 而我之前测试装的一款手机应用是可以找到启动图标的。

  • 2020-03-09 21:37:10

    安卓Tv端App开发与手机端的开发的区别

    因为大部分电视机的配置一般都比手机低,但是电视机一般都是用来看视频的,所以在做视频解码的时候,因为电视机配置比较低,所以大多数手机运行流畅的播放器在电视机上面都会卡顿,或者出现一些其他的问题,经过我同事长时间的测试,认为百度播放器跟小米播放器比较适合电视机作为播放器开发使用。如果你们要选择一个播放器,要先拿一个demo去很多台不同类型的电视机去测试,因为网络上面的播放器在电视机卡的真的很多,先测试好了再使用可以节约大家的时间。

  • 2020-03-09 22:11:39

    聊聊真实的 Android TV 开发技术栈

    智能电视越来越普及了,华为说四月发布智能电视跳票了,一加也说今后要布局智能电视,在智能电视方向,小米已经算是先驱了。但是还有不少开发把智能电视简单的理解成手机屏幕的放大,其实这两者并不一样。