vue-cli脚手架中的路由（vue-router）02

在路由配置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的结构，也让开发变得更简洁了。

---

你所羡慕的一切，都是有备而来。