如何在另一个文件中使用 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('/')
}

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

Answer 2

您可以使用docs建议的路线。

this.$route.path

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