从外部文件访问 Vue

Posted 2023-02-22

【中文标题】从外部文件访问 Vue

【英文标题】：Access Vue from external files

【发布时间】：2017-01-19 07:04:49

【问题描述】：

为了便于阅读，我想在一个外部文件中定义我的路线。

我的 main.js 文件是我启动 Vue 应用程序的地方。如下图：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

vue.use(VueRouter)

// I would like these route definitions to be contained in their own file
var Monday = Vue.extend( template: '<div>Monday view<div>' )
var Tuesday = Vue.extend( template: '<div>Tuesday view<div>' )
...

var router = new VueRouter()

router.map(
  '/monday':  component: Monday ,
  '/tuesday':  component: Tuesday 

router.start(App, 'body)

我更愿意将路由定义 var Monday = Vue.extend( ... ) 等分离到它们自己的文件中，以便在应用程序扩展时保持可读性。

问题：如果我要创建一个RouteDefinitions.js 文件，我无法访问“Vue”，我需要定义Vue.extend。我应该在 RouteDefinitions.js 中 import Vue from 'vue' 再次 吗？这是红旗吗？还是我应该简单地将所有路由逻辑保留在 main.js 中？

【参考方案1】：

你可以做到。在你的main.js 中做这样的事情

import Vue from 'vue'
import router from './config/router'

Vue.router = router

new Vue(
  router,
  el: '#app',
  render: h => h(App)
)

然后在router.js

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

Vue.use(VueRouter)

const router = new VueRouter(
  routes: [ 
    /* your routes definition here */ 
  ]
)

router.beforeEach((route, redirect, next) => 
  /* your route hooks */
  next()
)

router.afterEach(function (transition) 
  /* your route hooks */
)

export default router

【讨论】：

我应该提到，我使用的是 v2.0 之前的 vue-router。对于将来看到这个的人来说，传递给 VueRouter() 的某些选项对我们不起作用。您可能只想将 VueRouter 函数赋予路由器变量const router = new VueRouter()。否则这就像一个魅力！谢谢！！

是的，你是对的。我的示例基于 vue-router 2.0，但您基本上了解如何将路由器设置移动到单独的 .js 模块中，该模块可以导入您的 main.js...