webpack+vue-router+vue-cli的dev模式下,为啥window.location无效

webpack+vue-router+vue-cli的dev模式下,为啥window.location无效

  1. 以下Authorize.vu文件在authorize.html中有调用,程序希望在onLogin事件后,跳到loan_apply_info.html页面。但好像不管用啊。

  2. 点击authorize.html中的登录按钮时,会调用以下代码中events下的’onLogin‘事件,日志也有打出来,确认是调用到了。浏览器也有reload动作(进度条动了一下),但始终还是在本页。

  3. 如果在window.location = … 前后加上console.log(window.location)输出日志,可以看到window.location没有变化,都是/authorize.html。

  4. 以下代码试了window.location和window.open两种方式都无效。
    有问题的代码片断在下面:

Authorize.vue

export default {
  data () {
    return {
      LoanAuthPanelSetting: {
        title: '请登录',
        subtitle: '',
        intro: '',
        phone_no_label: '',
        phone_no_placeholder: '手机号',
        auth_code_label: '',
        auth_code_placeholder: '验证码',
        get_auth_code_btn_label: '获取验证码',
        login_btn_label: '登录',
        warn_label: '注意事项',
        warn_text: '注意事项内容'
      },
      phone_no: ''
    }
  },
  events: {
    //  登录页:获取验证码
    'onGetVerifyCode': function (phone_no) {
      console.log('[Authorize]:events:onGetVerifyCode():' + phone_no)
      // TODO: ajax-call...
    },
    //  登录页:登录
    'onLogin': function (auth_info) {
      console.log('[Authorize]:events:onLogin():' + auth_info)
      console.log(window.location)
      //  window.location = '/loan_apply_info.html'  ---- 【无效】
      window.open('/loan_apply_info.html', '_self')  ---- 【改成这句也无效】
    }
  },
  components: {
    LoanLoginPanel
  }
}

回答:

你是怎么解决的呀

回答:

location.href = 'index.html'试试

回答:

首先直接回答这个问题:
检查vue-router是history模式还是hash模式,如果是hash模式需要注意’#/’的拼接(默认是hash模式)
分析:
刚开始我以为是vue-router对window.unload或者beforeunload等事件作了劫持,查看vue-router.esm.js源码并未发现对window.unload或者beforeunload事件的劫持,而且beforeunload事件会有浏览器默认弹窗,所以否定了这一猜想;
改用this.$router.push()能正常跳转,仔细对比2种方式的url发现了不同之处(低级错误),错误的url中没有加上’http://‘,也就是说在history模式下,如果window.location.replace(‘localhost:8080/login’)不会正常跳转,而window.location.replace(‘http://localhost/:8080/login’)能正常跳转。
很多时候我们去查问题都容易忽略低级错误,希望能帮到遇到这种问题的同学。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注