基于Vue+Webpack拆分路由文件实现管理
事实是，如果你的项目不是特别大，一般是用不着分拆的。如果项目大了，那就需要考虑分拆路由了。其实，这个操作并不复杂。
当我们用vue-cli工具，创建一个新的vue项目时，就已经给大家新建好了一个路由文件src/router/index.js，内容如下：
importVuefrom'vue'
importRouterfrom'vue-router'
importHelloWorldfrom'@/components/HelloWorld'
Vue.use(Router)
exportdefaultnewRouter({
routes:[
{
path:'/',
name:'HelloWorld',
component:HelloWorld
}
]
})
我们以这个文件为蓝本，进行调整。举例，我们现在要新建一个news的这个路由，然后这个路由下面，还有一些子路由，我们就可以这样写：
router/index.js文件调整
//src/router/index.js
importVuefrom'vue'
importRouterfrom'vue-router'
//子路由视图VUE组件
importframefrom'@/frame/frame'
importHelloWorldfrom'@/components/HelloWorld'
//引用news子路由配置文件
importnewsfrom'./news.js'
Vue.use(Router)
exportdefaultnewRouter({
routes:[
{
path:'/',
name:'HelloWorld',
component:HelloWorld
},{
path:'/news',
component:frame,
children:news
}
]
})
如上，我们引入一个子路由视图的vue组件，然后再引入news的子路由配置文件即可。下面我们来编写这两个文件。
frame/frame子路由视图vue组件
子路由视图组件就异常简单了，如上，三行代码即可，有关router-view的相关内容，请查看：
https://router.vuejs.org/zh/api/#router-view
router/news.js子路由配置文件
其实，配置这个文件和vue没有什么关系，纯粹就是jses6的导出和导入而已。
importmainfrom'@/page/news/main'
importdetailsfrom'@/page/news/details'
exportdefault[
{path:'',component:main},
{path:'details',component:details}
]
如上，即可。我们就完成了路由的多文件管理了。这样看，是不是很简单呢？有什么问题，请在评论中留言，我会抽时间答复大家。
更多内容，请参考官方网站：https://router.vuejs.org/zh/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。