[英]Access Vue from external files
我想在外部文件中定義路由以提高可讀性。
我的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({ ... })
等分離到它們自己的文件中,以便在應用程序擴展時var Monday = Vue.extend({ ... })
閱讀。
問題:如果要創建RouteDefinitions.js
文件,則無法訪問“ Vue”,需要定義Vue.extend
。 是否應該從RouteDefinitions.js內部再次從import Vue from 'vue'
? 這是一個危險信號嗎? 還是我應該將所有路由邏輯都保留在main.js中?
你能行的。 在你的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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.