我想在外部文件中定义我的路线以提高可读性。
我的 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 中再次导入 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
关于javascript - 从外部文件访问Vue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39440212/