vue router 非组件之间跳转

Question

要实现在的项目功能

我需要在我自己登录网关做一个判断
我封装了一个axios 而这个涵数库每一次都会请求后端网络并返回状态码
当返回状态为：“登录超时” 时 我router跳转 而不是window.location='/login'

相关代码

import Vue from 'vue'
import router from 'vue-router'
import axios from 'axios';

Vue.prototype.$ajax = axios
//这个是我封装的一个axios
export default function(url,data={}){
    ...这里做一些网络请求使用...
    if(登录超时){
        ...router跳转...//如果在这里进行跳转
        /*router.push('无效')*/
    }
}

Answer 1

此处的router是并不是import Router from 'vue-router'的Router依赖.
它实际上是路由进行统一管理后导出的一个router对象.

// router.js
import Router from "vue-router";
import Home from 'Home.vue'
Vue.use(Router);

// 导出的router
export default new Router({
    routes: [
        {
          path: "/",
          name: "home",
          component: Home,
          children: [
            {
              path: "/a",
              name: "a",
              component: A
            }
        ]
})

在你需要的页面上,通过引入这样的对象实例,然后使用router.push方法

// 需要调用的js文件
// 引入router.js的对象
import router from 'router.js'
...
...
func(){
...
    router.push('/');
...    
}

Answer 2

封装的文件是不是在单独的 js 文件中，你可能需要把 router 引进去才能用 router.push

import {router} from '@/router/index'

router/index.js

import Vue from 'vue'
import iView from 'iview'
import VueRouter from 'vue-router'
import Cookies from 'js-cookie'
import { routers } from './router'

Vue.use(VueRouter)

const RouterConfig = {
  mode: 'history',
  routes: routers
}

export const router = new VueRouter(RouterConfig)

你需要的是 new VueRouter 后的这个对象。

Answer 3

const router = new Router({
  mode: "hash",
  routes
});

window.vueRouter = router;

把路由挂载在window上面，然后再需要的地方使用window.vueRouter.push 就可以了