文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在服务文件中调用路由器quasar vue

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

Stack Overflow用户

提问于 2020-05-14 17:58:31

回答 1查看 1.9K关注 0票数 0

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

我在我的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

以下是我在router/index.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
}

在service/index.js中，我尝试打印router和this.$router，但它们都不起作用。我的代码中有什么遗漏的地方吗？

router

quasar

vue.js

回答 1

Stack Overflow用户

发布于 2020-05-14 19:49:06

如果要在Vue组件之外使用Vue路由器，则必须导入router/index.js。

首先，您必须更改用于存储VueRouter实例的router/index.js内容。

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组件之外使用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' });
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61794465

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在服务文件中调用路由器quasar vueEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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