외부 파일에서 Vue 액세스

가독성을 위해 외부 파일에 내 경로를 정의하고 싶습니다.외부 파일에서 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을 정의해야합니다. 해야합니까 import Vue from 'vue'다시에서 RouteDefinitions.js? 이거 빨간색 깃발이야? 또는 단순히 모든 경로 논리를 main.js 내에 유지해야합니까?

출처

2016-09-11 bruh

할 수 있습니다. 당신의 main.js에 내가 미리 버전 2.0 VUE 라우터를 사용하고, 내가 언급해야 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

출처

2016-09-11 20:56:30

에서 그런 다음이

import Vue from 'vue' import router from './config/router' Vue.router = router new Vue({ router, el: '#app', render: h => h(App) })

그런 짓을. 앞으로이 문제를보고있는 사람들에게 VueRouter ({})에 전달 된 옵션 중 일부는 우리에게 적합하지 않습니다. 라우터 변수'const router = new VueRouter()'에 VueRouter 함수를 제공하기 만하면됩니다. 그렇지 않으면 이것은 매력처럼 일했습니다! 고맙습니다!! – bruh

네가 맞다. 내 예제는 vue-router 2.0을 기반으로하지만 기본적으로 라우터 설정을'main.js'에서 가져올 수있는 별도의'.js' 모듈로 옮기는 방법에 대한 아이디어를 얻습니다. –

외부 파일에서 Vue 액세스

답변

관련 문제