前言@H_301_1@

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

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

新建子路由页面@H_301_1@

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

<template>
divdiv class="main">
    ul>
        li><router-link :to="{name:'userdefault'}">用户中心默认</router-link></="{name:'userinfo'}">用户中心详情="{name:'userlast'}">用户中心设置router-viewscript>
export default {
    data() {
        return {
            
        }
       }           
}
>

新建子页面@H_301_1@

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

index.vue代码：

>
  >user index page>

info.vue代码：

>user info page>

set.vue代码：

>user set page>

配置routes.js文件@H_301_1@

打开src/config/routes.js文件，这个文件就是配置所有路由的文件。首先，在顶部插入下面的代码，引用子路由文件

// 引入子路由
import Frame from '../frame/subroute.vue'

routes.js完整代码：

import Vue from 'vue'
import Router from 'vue-router'

 引入子路由
import Frame from '../frame/subroute.vue'

 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'



 引入子页面
import userIndex from '../page/user/index.vue'
import userInfo from '../page/user/info.vue'
import userSet from '../page/user/set.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',component: index
    },{
        path: '/content''/user'},{name:'userdefault',path: '/user/userdefault''userlast',path: '/user/userlast'添加一个用户中心入口，整体代码：


id="app">
       ="nav-list">
      ="nav-item" to="/">首页="/content">内容页="/user">用户中心>

 {
  name: 'app
}
style lang="scss"
  @import "./style/style";
style>

我们进入用户中心默认页如图所示：

如果点击用户中心详情，就进入如图所示：

参考@H_301_1@
参考地址：http://blog.csdn.net/fungleo/article/details/53213167

• 上一篇：vue从入门到进阶：自定义指令direc下一篇：vue从入门到进阶：指令与事件（二）