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     //导出

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

2、在次建立一个homeRouter的js文件

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

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

export default homeRouter      //导出

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/107027317