Vue2+VueRouter2+webpack 构建项目实战（五）：配置子路由

前言

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

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

新建子路由页面

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

新建子页面

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

index.vue代码：

info.vue代码：

set.vue代码：

配置routes.js文件

打开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',
        component: content
      },
      {    
          name:'user',
          path:'/user',
          component: Frame,
          children: [
              {name:'default',path: '/user/',redirect: '/user/userdefault'},
            {name:'userdefault',path: '/user/userdefault',component: userIndex},
            {name:'userinfo',path: '/user/userinfo',component: userInfo},
            {name:'userlast',path: '/user/userlast',component: userSet}
          ],
        },
  ]
})

同时在App.vue中添加一个用户中心入口，整体代码：

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

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

参考

参考地址：http://blog.csdn.net/fungleo/...