从外部文件访问 Vue

Question

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

我的 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 中？

Answer 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

从外部文件访问 Vue

Access Vue from external files

javascript

commonjs

node.js

vue.js

vue-router