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

Posted 2023-03-13

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

【英文标题】：How to use the vue router in another file?

【发布时间】：2020-10-28 16:10:20

【问题描述】：

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”。

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

【问题讨论】：

您需要通过this.$route引用它

【参考方案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('/')

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

【参考方案2】：

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

this.$route.path

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

【讨论】：

文件authService中没有this。当我尝试console.log('this', this) 时，它返回undefined。

您可以在代码沙箱中发布您的代码的现场演示吗？

没问题，line 63。

看来你是在访问vue应用之外的路由。是这样吗？