[ vue ] quasar框架踩坑：在vue文件外导入路由，执行router.push('/')没有效果

程序员娜娜技术 2022年11月8日

0 收藏 428 点赞 2,101 浏览 1368 个字

问题描述：

1. 如图所示的项目结构目录， axios.js 文件负责拦截全局请求和回复，我在拦截回复的代码中写了：如果服务器回复了一个401错误，则执行Router.push(‘/’)，但是该方法失效，并不会出现跳转

import Vue from 'vue'
import axios from 'axios'
import Router from '../router/index.js'
import Store from '../store'
< 略... >
axios.interceptors.response.use(function(response){
  return response
},function(error){
  switch (error.response.status){
      case 401:
          Vue.toasted.error('401:Authorization error')
          Store.dispatch('base/logout_action')
          let rt = Router() // router/index.js 提供工厂函数，这里需要实例化它才能用
          rt.push('/').catch(e=>{})
          break;
  }
  return Promise.reject(error)
})
Vue.prototype.$axios = axios

2. 接下来看 router/index.js ，它从 router/routes.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;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */export default function(){
  const Router = 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
  })
  return Router
}