Question

是否可以访问Vue组件外部的VueRouter。

我尝试在JavaScript文件中导入Vue。在此文件中，我可以访问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')
})

Answer 1

我只是从组件中使用它，但你可以试试以下，以防你使用常见的样板文件路由在router / index.js下定义，然后你只需导入它：

import Router from '../router';

可以在代码中使用它，例如

Router.push('/mypage')

不确定它是否有效但试一试。

Answer 2

您已使用此声明

定义了路由器

[["blah1],[blah7]]

所以你需要做的就是在Vue之外访问它

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

或者你想做的其他事情。

如果您想在其他文件中使用它，您可能需要在router.push(...)上公开它。

Answer 3

我通过在routes.js（现在为router.js）导出我的路由器而不是路由来解决这个问题

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

然后任何文件都可以通过

访问路由器

import router from 'config/router'

Answer 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
  }
}

在Vue组件外部访问VueRouter

main.js

4 个答案: