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

問題描述：

   

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
}

 

我們看到：quasar提供的默認路由方式是導出了一個函數，而不是我們真正實例化的Router。

這就導致我在每次在vue文件外面使用都要實例化一次該函數，得到的是一個新的路由，最終導致路由跳轉失效。

 

 

解決方案：

注意問題描述2 中高亮部分，寫着如果不是SSR模式，則直接導出Router實例，於是我們把工廠函數去掉即可。在vue文件之外就可以直接導入並且正常使用了

 

備注：

vuex的使用同理！！