Vue 컴포넌트 외부에 있는 VueRouter에 액세스합니다.

Vue 컴포넌트 외부에 있는 VueRouter에 액세스합니다.

Vue 컴포넌트 외부에서 VueRouter에 액세스할 수 있습니까?

JavaScript 파일로 Vue Import를 시도했습니다.이 파일에서는Vue.http하지만 아니다Vue.router또는Vue.$router마지막 두 개의 반환이 정의되지 않았습니다.

main.discloss.main.discloss.

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')
})

지금까지 컴포넌트에서만 사용했는데, 일반적인 보일러 플레이트를 사용하는 경우 다음과 같이 루트가 router/index.js로 정의되어 Import할 수 있습니다.

import Router from '../router'; 

코드로 사용할 수 있게 된 후, 예를 들어

Router.push('/mypage')

효과가 있을지 모르겠지만 한번 시도해 보세요.

이 문제를 해결하려면 루트 대신 라우터를 routes.js(현재의 router.js)로 내보냅니다.

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

그 후, 임의의 파일이 라우터에 액세스 할 수 있습니다.

import router from 'config/router'

이 문장으로 라우터를 정의했습니다.

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

따라서 Vue 외부에서 액세스하려면

router.push(...)

아니면 네가 하고 싶은 거라도.

다른 파일에서 사용하는 경우 다음 파일에 노출해야 할 수 있습니다.window.

라우터를 에 추가합니다.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
  }
}

언급URL : https://stackoverflow.com/questions/43557941/access-vuerouter-outside-vue-components