Website-Suche

javascript - Wie verwendet man den Vue-Router in einer anderen Datei?

Der vue-router funktioniert einwandfrei, aber wir möchten eine Route in einer anderen Datei speichern. Ein bisschen Code zur Verdeutlichung:

// 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
})

Es wäre großartig, die Route in einer anderen Datei so anpassen zu können:

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

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

Aber dies wirft den Fehler:

TS2339: Die Eigenschaft 'currentRoute' existiert nicht im Typ 'RouteCallback'.

Wir exportieren/importieren den Router wahrscheinlich nicht korrekt.

Antwort #1

Behoben, indem der Router korrekt exportiert wurde:

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
})

Und dann konsumieren es außerhalb von Vue, wo es keinen this-Kontext gibt, so wie hier:

import { Router } from 'src/router'

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

Hoffe, das könnte anderen helfen, die auf dasselbe Problem stoßen.

Antwort #2

Sie können die Route wie in der Dokumentation vorgeschlagen verwenden.

this.$route.path

Die Route wird Ihnen eine aktive Instanz des Routers bereitstellen.

Verwandte Artikel