vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（五）

vue入门之路篇系列教程：
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（三）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（五）

前言

通过前面几章的实战，我们已经顺利的构建项目，并且从API接口获取到数据并且渲染出来了。制作更多的页面，更复杂的应用，就是各位自己根据自己的项目去调整的事情了。

在vue中，我们使用vue-router来进行路由的构建，如果想学习可以去看：vue-router文档

很简单但是不上实战你永远不知道它写的什么，是什么意思？

本章就讲一下如何配置子路由，因为我们的项目不可能只有一个页面，而是由众多页面构成的。

新建子路由页面

在第二节中，我们新建了一个src/frame/subroute.vue的子页面。当时是留空放在那里的。这里，我们给它填写上内容，代码如下：

<template>
<div>
    <router-view></router-view>
</div>
</template>

好，我们的子路由示例页面就构建好了。

新建子页面

我们在src/page文件夹下新建文件夹user，然后在里面新建三个文件index.vue，info.vue和love.vue。代码内容分别如下：