vue拆分router路由,方便管理
1、在router文件下建立一个config.js文件
const router = { //定义路由对象
home: { //对象形式
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
},
about: {
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
//路由对象
}
export default router //导出
2、在次建立一个homeRouter的js文件
import routers from "./config" //导入路由
const homeRouter=[ //定义数组
routers.home,
routers.about,
//在config中添加路由就在这里接着写
]
export default homeRouter //导出
3、router路由下有个默认的index的js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import homeRouter from "./homeRouter" //引入
Vue.use(VueRouter)
const routes = [
...homeRouter //...路由
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router