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

您可以按照docs的建议使用路由。

this.$route.path

该路由将为您提供路由器的活动实例。

Answer 2

通过正确导出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('/')
}

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

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

2 个答案: