如何在服务文件中调用路由器 quasar vue?

Question

我需要在服务文件中打印路由器。我怎么做呢？

在我的Quasar Vue中，我有以下文件夹结构

src
  service
   index.js // I need to call router here
  src 
  pages
  components
  router

这是我的路由器文件routes.js。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('pages/Login.vue'),
  }
 ]


if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue')
  })
}

export default routes

这是我在routerindex.js中的代码。

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

export default function ({ }) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })
  Router.beforeEach((to, from, next) => {
    const accessToken = Cookies.getItem('token')
    if (accessToken === null && to.name !== 'Login') {
      next({
        path: '/login',
        replace: true
      })
      return
    } else {
      next()
    }
  })

  return Router
}

在serviceindex.js中，我试图打印出 router 和 this.$router两者都不工作。我的代码中是否有遗漏的地方？

Answer 1

如果你想在Vue Components之外使用Vue Router，你必须导入以下文件 router/index.js.

首先你必须改变 router/index.js 用于存储VueRouter实例。

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);
let router = null;

export default function() {
  if (!router) {
    router = new VueRouter({
      scrollBehavior: () => ({ x: 0, y: 0 }),
      routes,
      mode: process.env.VUE_ROUTER_MODE,
      base: process.env.VUE_ROUTER_BASE,
    });

    router.beforeEach((to, from, next) => {
      const accessToken = Cookies.getItem('token');
      if (accessToken === null && to.name !== 'Login') {
        next({ path: '/login', replace: true });
        return;
      } else {
        next();
      }
    });
  }

  return router;
}

现在您可以在Vue Components之外使用VueRouter。

<template>
  <div>
    <button @click="test">TEST</button>
  </div>
</template>

<script>
import push from "@/service/index.js";

export default {
  methods: {
    test() {
      push();
    }
  }
};
</script>

// service/index.js

import router from '@/router/index.js';

export default function() {
  router().push({ name: 'About' });
}