Vue Router中router.push跳转失效，提交b-from后仅登录页反复重载

问题排查及修复方案 #

1. 阻止b-form的默认提交行为 #

页面刷新而路由跳转不生效的核心问题大概率是表单默认提交行为未被阻止：

• 给b-form的@submit事件加上.prevent修饰符，示例：

<b-form @submit.prevent="login">
<!-- 表单内容 -->
</b-form>

原生表单提交会触发整页刷新，会打断JS执行的router.push逻辑，页面刷新后会回到当前登录页。

2. 修正异步逻辑写法 #

当前代码混用了async/await和.then，逻辑存在隐患，调整后的login方法代码参考：

async login({ commit, state }) {
  console.log("Login")
  try {
    const response = await HTTP().post('/admin/login', {
      email: state.loginEmail,
      password: state.loginPassword
    })
    console.log("Ok", response.data)
    if (response.data == 'UserNotFoundException') {
      alert('User not found')
    } else if (response.data == 'PasswordMisMatchException') {
      alert('password not match')
    } else if (response.data.token) {
      // commit('setToken', response.data.token)
    }
    // 所有分支都要跳转的话可以统一放到最后
    router.push('/')
  } catch (error) {
    console.log(error)
  }
},

3. 验证router实例导入正确性 #

确认当前store/actions文件里导入的router是你项目实例化的路由对象，导入示例：

import router from '@/router' // 路径要和你项目路由导出的位置一致

4. 验证路由重定向逻辑 #

你配置的/路径默认重定向到/dashboard/docs-dashboard，可以手动在浏览器地址栏输入/测试是否能正常跳转到后台页面，排查路由配置是否生效。

补充排查 #

如果以上操作完成后仍未解决，打开浏览器控制台查看是否有JS报错，若出现push is undefined则说明router实例导入错误，检查导入路径即可。

内容的提问来源于stack exchange，提问作者azam