[英]Access Vue from external files
I would like to define my routes in an external file for readability. 我想在外部文件中定义路由以提高可读性。
My main.js
file is where I initiate my Vue app. 我的
main.js
文件是启动Vue应用程序的地方。 Seen below: 如下所示:
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)
I would prefer to separate the route definitions var Monday = Vue.extend({ ... })
etc, into their own files for readability when the application scales. 我希望将路由定义
var Monday = Vue.extend({ ... })
等分离到它们自己的文件中,以便在应用程序扩展时var Monday = Vue.extend({ ... })
阅读。
The problem: if I was to create a RouteDefinitions.js
file, I don't have access to "Vue", which I need to define Vue.extend
. 问题:如果要创建
RouteDefinitions.js
文件,则无法访问“ Vue”,需要定义Vue.extend
。 Should I import Vue from 'vue'
again from inside RouteDefinitions.js? 是否应该从RouteDefinitions.js内部再次从
import Vue from 'vue'
? Is this a red flag? 这是一个危险信号吗? Or should I simply keep all my route logic inside main.js?
还是我应该将所有路由逻辑都保留在main.js中?
You can do it. 你能行的。 In your
main.js
do something like this 在你的
main.js
做这样的事情
import Vue from 'vue'
import router from './config/router'
Vue.router = router
new Vue({
router,
el: '#app',
render: h => h(App)
})
Then in the router.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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.