Vue：在助手类中导入路由器并推送路由

Question

I'm using Vue for the first time and try to import my current router instance to a JavaScript class , where I handle the Authentification .

So this is my router file:

import Vue from 'vue';
import Router from 'vue-router';
import FirstRoute from '@/components/FirstRoute';
import SecondRoute from '@/components/SecondRoute';

Vue.use(Router);

export default new Router({
  mode: 'history',
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: '/',
      meta: { requiredAuth: false },
      name: 'FirstRoute',
      component: FirstRoute,
    },
    {
      path: '/second',
      meta: { requiredAuth: false },
      name: 'SecondRoute',
      component: SecondRoute,
    },
  ],
});

This is my helper class file, where I try to import and reuse the existing router instance, to push a route in a function :

import Router from '../router'; /* This is where I import the router instance */

const globalRouter = new Router(); /* Attempt 1 */

class AuthService {
  constructor() {
    console.log(Router); /* This console.log() shows me my router instance with all routes - so it was imported the right way and works */
    const routerInClass = new Router(); /* Attempt 2 */

    this.doSomething();
  }
}

doSomething() {
  const routerInFunction = new Router(); /* Attempt 3 */

  /* Results of my attempts: */
  console.log(globalRouter); /* Result Attempt 1: undefined */
  console.log(routerInClass); /* Result Attempt 2: undefined */
  console.log(routerInFunction); /* Result Attempt 3: undefined */
  console.log(Router); /* Result Attempt 4: undefined */

  /* Use imported router to push a route */
  Router.push({ path: '/SecondRoute' }); /* Not working with attempt 1 to 4 */
}

Use case behind it: I check, if the auth token has expired. If true, I save my current href using window.location.href in the localStorage and when logging in again, I redirect to the previous page. Now I'm trying to use the Router , because the redirect flickers and I hope it will be smoother with the `Router.

This are my attempts, which all failed. I can log the Router in the constructor , but in my function it is always undefined . I can't do the push there. Any ideas?

Answer 1

In your helper file, you don't need to import Vue nor VueRouter

import router from '../router';

class AuthService {
    constructor() {
        console.log(router);
        this.doSomething();
    }

    doSomething() {
        /* Use imported router to push a route */
        router.push({ path: '/SecondRoute' });
    }
}

EDIT : move the doSomething function in your class