Доступ к VueRouter за пределами компонентов Vue

Возможно ли получить доступ к VueRouter за пределами компонентов Vue.

Я попытался импортировать Vue в файл JavaScript. В этом файле я могу получить доступ к Vue.http, но не Vue.router или Vue.$router. Последние 2 возвращают undefined.

main.js

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'

import routes from './config/routes'
import store from './store'
import * as rootUrl from './config/rootUrl'



//Routing support
Vue.use(VueRouter);
//Backend support
Vue.use(VueResource);

const router = new VueRouter({
    mode: 'history',
    routes: routes
})

new Vue({
    store,
    router,
}).$mount('#app')

Vue.http.get(rootUrl.url, {Accept: "application/json"}).then(response => {
    let data = response.body
    store.commit('SET_APP_DATA', { data: {
        'title': data.title,
        'peopleUrl': data.people,
        'eventsUrl':  data.events
    }})
    store.commit('SET_READY')
})

Ответ 1

Я использовал его только из компонентов, но вы можете попробовать следовать, если вы используете общий шаблон, где маршруты определены в router/index.js, тогда вы просто импортируете его, как:

import Router from '../router';

После того, как можно использовать его в коде, например.

Router.push('/mypage')

Не уверен, что он работает, но дайте ему попробовать.

Ответ 2

Вы определили свой маршрутизатор с этим утверждением

const router = new VueRouter({
    mode: 'history',
    routes: routes
})

Итак, все, что вам нужно сделать для доступа к нему за пределами Vue, используется

router.push(...)

Или все, что вы хотите сделать.

Если вы хотите использовать его в каком-либо другом файле, вам может потребоваться его открыть на window.

Ответ 3

Я решил это, экспортировав мой маршрутизатор вместо своих маршрутов в routes.js(теперь router.js)

export default new VueRouter({
    mode: 'history',
    routes: routes
})

Любой файл может получить доступ к маршрутизатору с помощью

import router from 'config/router'

Ответ 4

Добавьте маршрутизатор к Vue конструктора в том же файле, который вы создаете и инициализировать ваш vue экземпляр.

Vue.$router = router

Тогда используйте это, поскольку Вы сначала попробовали.

Vue.$router.push(...)

При использовании Typescript вы можете расширить VueContructor чтобы включить проверку типов и автозаполнение.

mytypes.d.ts

import {VueRouter} from "vue-router/types/router";
declare module 'vue/types/vue' {
  interface VueConstructor {
    $router: VueRouter
  }
}