vue拆分router路由，方便管理

1、在router文件下建立一个config.js文件

代码语言：javascript复制

 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文件

代码语言：javascript复制

import routers from "./config"     //导入路由 

const homeRouter=[       //定义数组
    routers.home,
    routers.about,
    //在config中添加路由就在这里接着写
]

export default homeRouter      //导出

3、router路由下有个默认的index的js文件

代码语言：javascript复制

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

config router

0 人点赞