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

前言

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

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

新建子路由页面

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

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

        }
       }
}
</script>

新建子页面

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

index.vue代码：

<template>
  <div>user index page</div>
</template>

info.vue代码：

<template>
  <div>user info page</div>
</template>

set.vue代码：

<template>
  <div>user set page</div>
</template>

配置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中添加一个用户中心入口，整体代码：

<template>
  <div id="app">
       <div class="nav-list">
      <router-link class="nav-item" to="/">首页</router-link>
      <router-link class="nav-item" to="/content">内容页</router-link>
      <router-link class="nav-item" to="/user">用户中心</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: ‘app‘
}
</script>

<style lang="scss">
  @import "./style/style";
</style>

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

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

参考

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