Quasar 遇到的坑——在axios中使用router.push(‘/‘)路由跳转无效

Quasar中，在axios中使用router.push(‘/‘)路由跳转无效

什么是Quasar？

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源框架，允许作为Web开发人员的您快速创建多种类型的responsive++网站/应用：

• SPAs (单页应用)
• SSR (服务器端渲染的应用) (+可选的PWA客户端接管)
• PWA（渐进式网页应用）
• 通过Cordova或Capacitor构建移动APP（Android、iOS…）
• 多平台桌面应用（使用Electron）

Quasar的座右铭是：编写代码一次并同时将其部署为网站、移动应用和/或Electron应用。
是的，所有这些应用都用一个代码库，通过使用最先进的CLI并辅以精心编写的、性能导向的Quasar Web组件，帮助您以最短时间开发应用。
更多关于Quasar的介绍请移步官网 Quasar框架介绍

最近使用Quasar遇到这样一个坑，Quasar CLI搭建好项目后，在axois中校验用户登录失效时进行路由跳转，但是引入vue-router后无法跳转。一起来看下问题吧。

一、问题描述

在axios引入router，使用router.push路由跳转无效。如图：

axios.js

route/index.js

二、解决办法

阅读官方文档及代码备注后，可以发现，代码注释里详细说明了（quasar官方确实很贴心）。如果不是SSR模式，则可以直接导出Router实例。修改后的代码如下：

route/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 * 如果没有SSR模式，你可以
 * 直接导出路由器实例化
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default new VueRouter({
  scrollBehavior: () => ({ x: 0, y: 0 }),
  routes,
  // Leave these as they are and change in quasar.conf.js instead!
  // quasar.conf.js -> build -> vueRouterMode
  // quasar.conf.js -> build -> publicPath
  mode: process.env.VUE_ROUTER_MODE,
  base: process.env.VUE_ROUTER_BASE
})

三、原因分析

quasar提供的默认路由方式导出的是一个函数，而不是我们真正实例化的Router。

所以我在每次在vue文件外使用都实例化一次该函数，得到的是一个新的路由，因此路由跳转失败。

看都看到这了，留下三连吧 。