javascript - How to use the vue router in another file? - Stack Overflow

admin管理员组

文章数量:1399966

The vue-router is functioning fine but we would like to push a route in another file. Some code to clarify:

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

It would be great to be able to adjust the route in another file like this:

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

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

But this throws the error:

TS2339: Property 'currentRoute' does not exist on type 'RouteCallback'.

We're probably not exporting/importing the router correctly.

The vue-router is functioning fine but we would like to push a route in another file. Some code to clarify:

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

It would be great to be able to adjust the route in another file like this:

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

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

But this throws the error:

TS2339: Property 'currentRoute' does not exist on type 'RouteCallback'.

We're probably not exporting/importing the router correctly.

• javascript
• typescript
• vue.js
• vue-router
• quasar-framework

Share Improve this question Follow asked Jul 8, 2020 at 9:22 DarkLite1DarkLite1 14.8k4646 gold badges136136 silver badges234234 bronze badges 1

• you need to reference it via this.$route – SC Kim Commented Jul 8, 2020 at 9:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Fixed it by exporting the Router correctly:

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

And then consuming it outside of Vue where there is no this context like this:

import { Router } from 'src/router'

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

Hope this might help others running into the same issue.

You can use route as suggested by docs.

this.$route.path

The route will provide you with active instance of the router.

本文标签： javascriptHow to use the vue router in another fileStack Overflow