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


  • 2019-02-15 10:36:45

    将MP4转成m3u8

    网上很多垃圾文章推荐segmenter工具,但用的时候,3.5G的ts文件丢了一半的数据,于是想到了ffmpeg转。

  • 2019-02-19 10:01:55

    node下使用open模块在指定浏览器下打开url

    最近在做一个项目的过程中,得到一个远程二维码图片的url,需要扫码登录,每次都是在控制台发url打印出来,再复制粘贴到浏览器的地址栏中打开扫码,整个过程过于繁琐,于是想找一个模块,直接在node下,指定浏览器打开该图片。这样可以省不少事。

  • 2019-02-24 09:47:09

    解决Node.js的命令行输出中文乱码问题(也适用于Electron)

    ​一般我们的js文件都是试用utf8编码保存的,但是中文windows的命令行一般默认使用cp936编码(就是gbk),这样我们用js代码 console.log('中文');输出日志的时候,会发现输出的是乱码。 网上有提供一些解决方案,典型的就是用iconv或iconv-lite,把这些中文字符串先转成gbk再输出。 但是这个方案我试了多次,在win10的命令行下,utf8的字符串是成功转成了gbk字符串了(通过打印Buffer可以见到),但是输出还是乱码。