Vue.js 从我的服务访问路由实例

发布于09月09日

我创建了一个身份验证服务(src/services/auth.js)，只包含函数和属性..

export default {
    login() { ... }
    ...
}

在login函数中，我需要重定向用户

router.go(redirect)

How can I retrieve router instance?

背景

在我的src/main.js文件中，我创建了一个路由..

import VueRouter from 'vue-router'
Vue.use(VueRouter)
import route from './routes'
const router = new VueRouter({
  history: false,
  linkActiveClass: 'active'
})
route(router)

const App = Vue.extend(require('./App.vue'))

在我的src/routers.js只 map 路由

export default function configRouter (router) {
    router.map({ .. })
}

推荐答案

您应该导出router实例，然后将其导入auth.js服务.

以下是我的一些改进方法:

src/routes.js

export default {
  '/': {
    component: {...}
  },
  '/about': {
    component: {...}
  },
  ...
}

src/router.js

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

Vue.use(VueRouter)

const router = new VueRouter({...})

router.map(Routes)

// export the router instance
export default router

src/main.js

import Router from './router'
import App from './app'

Router.start(App, '#app')

src/services/auth.js

import Router from '../router'

export default {
  login () {
    // redirect
    Router.go('path')
  }
}

Vue.js相关问答推荐

元素不会对react 性props 的更改做出react

Vue 2 如何在全局函数中返回观察者

vuejs：将props传递给javascript中的组件？

vue.js 在 App.vue 中获取路由名称

Bootstrap-vue b-table，标题中带有过滤器

如何使用 vue-resource 添加额外的标头来发布请求？

Laravel Blade 模板将数据传递给 Vue JS 组件

如何在 Vue.js 3 中使用 Vue 3 Meta？

如何在某些路由上隐藏全局组件(例如导航栏)？

如何在 NPM 上创建和发布 Vuejs 组件

[Vue 警告]：无效的props：propsscrollThreshold的类型判断失败.期望的数字，得到字符串

将 VueJS 数据属性重置为初始值

如何突出显示 Vuetify 菜单中的选定项目？

Vuejs css 范围性能

嵌套组件

Vue.js 的 $emit 和 $dispatch 有什么区别？

如何设置：id 前缀字符串？

Axios 请求拦截器在我的 vue 应用程序中不起作用

如何在 vue.js 中通过单击事件发出值

如何在 VeeValidate 中自定义错误信息(字段名称)？

实用课程推荐