アクセスVueの私は読みやすくするために、外部ファイルで私のルートを定義したい外部ファイル

Question

から。私はVueのアプリを開始するところ

私main.jsファイルです。下記の見：

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.extendを定義する必要がある "Vue"にアクセスできません。私はimport Vue from 'vue'再び RouteDefinitions.jsからですか？これは赤旗ですか？それとも、main.js内のすべてのルートロジックを保持するだけですか？

Answer 1

できます。あなたのmain.jsで次に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