如何在另一个文件中使用vue路由器？

Question

vue-router 运行良好，但我们想将路由推送到另一个文件中。一些代码来澄清：

// src/router/index.ts
import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import routes from './routes'

export default route(function ({ Vue }) {
  Vue.use(VueRouter)
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE,
  })

  return Router
})

如果能够像这样在另一个文件中调整路线，那就太好了：

// src/services/auth/authService.ts
import router from 'src/router'

if (router.currentRoute.path === '/login') {
  console.log('authService push to /');
  router.push('/')
}

但这会引发错误：

TS2339：类型“RouteCallback”上不存在属性“currentRoute”。

我们可能没有正确导出/导入路由器。

Answer 1

通过正确导出来修复它Router：

import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import routes from './routes'

export const Router = new VueRouter({
  scrollBehavior: () => ({ x: 0, y: 0 }),
  routes,
  mode: process.env.VUE_ROUTER_MODE,
  base: process.env.VUE_ROUTER_BASE,
})

export default route(function ({ Vue }) {
  Vue.use(VueRouter)
  return Router
})

然后在没有this上下文的 Vue 之外使用它：

import { Router } from 'src/router'

if (Router.currentRoute.path === '/login') {
  console.log('authService push to /')
  Router.push('/')
}

希望这可以帮助其他遇到同样问题的人。