從外部文件訪問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。我應該import Vue from 'vue'再次從RouteDefinitions.js裏面？這是一面紅旗嗎？或者我應該只保留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