在 Vue 组件之外访问 VueRouter

Posted 2023-02-22

【中文标题】在 Vue 组件之外访问 VueRouter

【英文标题】：Access VueRouter outside Vue components

【发布时间】：2017-09-19 08:31:47

【问题描述】：

是否可以。

我尝试在 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')
)

【问题讨论】：

你能显示你创建路由器的代码吗？

我添加了代码

【参考方案1】：

我只在组件中使用过它，但如果您使用的是在 router/index.js 下定义路由的通用样板，您可以尝试以下操作，然后您只需像这样导入它：

import Router from '../router'; 

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

Router.push('/mypage')

不确定它是否有效，但请尝试一下。

【讨论】：

我自己刚开始使用 Vue，这是我遇到的第一个问题。希望你能找到解决办法。

这个答案是正确的，GroovyP 只是路由器设置不正确

【参考方案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