Vue 路由代码抽离、复用router-view

一. 路由代码抽离

1. 在main.js文件中的routes记录了所有路由的路径path和组件component，及引入信息等等。我们可以将这些记录抽离出来，另存放于一个文档当中。
2. 在src文件下，建立一个routes.js文件，与main.js同级

3. 如下图所示，将路由的引入和记录都放在routes.js中，然后将routes参数export传出。
4. 在main.js中，将{routes}通过import引入，即可实现路由代码抽离。

二.复用 router-view

1. 如果我们想让，“关于我们”About组件下面，展示（router-view）的四个组件，也在主页中展示。那我们就涉及到router-view的复用

2. 在App.vue根组件中，建立一块区域用于存储上面的about组件下的东西。建立三个router-view标签，添加一个name属性。分别为orderingGuide、delivery、history。

3. 在刚建立的routes.js文件中，根路由“/”的component属性改为components复数形式。在components属性中，存放的default默认组件仍为Home。

4. 再额外添加上面的orderingGuide、delivery、history三个name对应的组件，即可实现首页展示其他组件（非自己二级路由）里的内容。