在路由配置01中示例的配置方式，只适用于写一些测试项目，这种配置有一个很不便捷的地方，如果要配置路由，那么就要将app应用程序中的内容都写在main.js中，这样的话，结构入口文件App.vue就形同虚设。
在本篇文章的配置中，还是要基于当前项目安装vue-router模块（命令在路由配置01中有示例）。
1. 在src根目录下新建router.js文件，这个文件用来配置整个项目中所有的路由（这个文件的名称不限制，位置在src文件夹中，它是要作为配置文件导入到main.js当中的）。
src文件夹
2. 在components文件夹中新建你的路由文件（示例header.vue和footer.vue，并在其中写入一些测试数据）；
3. 在router.js中配置路由。
router.js
4. 在main.js中导入router.js并且启动路由配置。
main.js
5. 在App.vue中设置路由锚点（router-link和router-view）。
App.vue的template
这样的路由配置不会影响App.vue的结构，也让开发变得更简洁了。
你所羡慕的一切，都是有备而来。
网友评论