Vue路由分文件拆分管理

这段时间做的商城系统，相对也是比较复杂的，路由比较多，直接都写在路由入口文件index.js中，后期维护起来头疼，我们可以根据不同的模块来创建不同的路由子文件，在自文件中维护各个模块的路由，引入到index.js中就可以了。
路由子文件sellerRoute.js

const sellerRoute = [
	{
		path: '/seller/lanchGoods',
		name: 'LanchGoods',
		component: () => {
			return import('@/pages/sellerCenter/goods/LanchGoods')
		},
		meta:{
			title:'发布商品'
		}
	},
	{
		path: '/seller/allGoods',
		name: 'GoodsList',
		component: () => {
			return import('@/pages/sellerCenter/goods/GoodsList')
		},
		meta:{
			title:'全部商品'
		}
	},
	{
		path: '/seller/onSaleGoods',
		name: 'GoodsList',
		component: () => {
			return import('@/pages/sellerCenter/goods/GoodsList')
		},
		meta:{
			title:'在售商品'
		}
	}
]

export default sellerRoute

在index.js中引入sellerRoute.js

import Vue from 'vue'
import Router from 'vue-router'  
// 公共页面的路由文件
import PUBLIC from './modules/public'
// 投票模块的路由文件
import SellerRoute from './modules/sellerRoute'
  
Vue.use(Router)
  
// 定义路由
const router = new Router({ 
  mode: 'history', 
  routes: [  
    ...PUBLIC,  
    ...SellerRoute, 
  ]
})
  
// 路由变化时改变title
router.beforeEach((to, from, next) => {  
  if (document.title !== to.meta.title) {    
    document.title = to.meta.title;  
  }  
  next()
})
  
// 导出
export default router

参考：https://www.jb51.net/article/193205.htm
感谢原博主整理分享