2

読みやすくするために、ルートを外部ファイルに定義したいと思います。

私の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 内に保持する必要がありますか?

4

1 に答える 1

4

あなたはそれを行うことができます。あなた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
于 2016-09-11T20:56:30.353 に答える