Javascript 从外部文件访问Vue

为了便于阅读，我想在外部文件中定义路由

我的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。我是否应该从RoutedDefinitions.js内部再次从“Vue”导入Vue？这是一面红旗吗？或者我应该将所有路由逻辑都保存在main.js中吗

你能行。在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中

---

我应该提到，我使用的是v2.0之前的vue路由器。对于将来关注这一点的人来说，传递给VueRouter{}的一些选项对我们不起作用。您可能只想将VueRouter函数赋予路由器变量const router=new VueRouter。否则，这就像一个魅力！非常感谢。是的，你是对的。我的示例基于vue router 2.0，但您基本上了解了如何将路由器设置移动到单独的.js模块中，该模块可以导入到主.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