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-02-24 18:43:54

    百度地图JS关于规划路线偏离预警的解决方式

    说实在的这个解决方案有点low,我并不会很赞成,效率有点低。如果多的话,很是耗费资源。 我推荐使用矩形来解决这个问题,而不是圆形。 当日用矩形的话,就要确保轨迹是折线的,而不是弧线等。

  • 2020-02-24 18:45:33

    巧妙解决百度地图加偏纠偏问题

    所谓的加偏,就是将真实坐标加上一定的偏移量,而这个偏移量又不是线性的,不同地区偏移不一样,但同一地区偏移量却差不多,因此,有人就使用了个暴力破解的方法,

  • 2020-02-24 18:48:34

    规划驾车路线和途径点及判断车辆路线偏移

    项目需求需要利用百度地图构建路线并支持设置途径点,以及可以实时监控车辆是否偏移路线;两种方案。 写了比较完整的注释了,替换ak可直接看效果,规划驾车路线和途径点及判断车辆路线偏移

  • 2020-02-25 15:15:56

    nuxtjs全栈

    Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 要在页面之间使用路由,我们建议使用<nuxt-link> 标签。

  • 2020-02-25 19:24:08

    IDEA 简单的正则匹配

    IDEA在进行查看或替换的时候,勾选Regex 选项就可以进行正则匹配查找了 几个简单实用的正则:

  • 2020-02-26 20:16:49

    一条简单的命令就可以将 stylus 语法转换为 scss 语法

    因为早期有个项目用到了 stylus,stylus 开发起来很爽,但 stylus 基于缩进的代码在修改的时候不是很方便,加上所在团队开发使用的都是 SCSS ,为了便于维护和统一,准备将项目中的 stylus 替换成 SCSS。手动转换 stylus 浪费时间,且出错率大,当时在想也许别人也有这样的需求呢,所以就做了这样一个项目。请各位大佬动动你们发财的小手,给我点个 star,不胜感激。^_^