个人中心嵌套路由的实现

一 嵌套路由

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

例如，将ucenter.vue文件创建到与ucenter目录的父目录下，即和ucenter目录保持平级。

假设文件结构如：

Nuxt.js 自动生成的路由配置如下：

router: {
    routes: [
        {
            path: '/ucenter',
            component: 'pages/ucenter.vue',
            children: [
                {
                    path: '',
                    component: 'pages/ucenter/index.vue',
                    name: 'ucenter'
                },
                {
                    path: 'order',
                    component: 'pages/ucenter/order.vue',
                    name: 'ucenter-order'
                },
                {
                    path: 'collect',
                    component: 'pages/ucenter/collect.vue',
                    name: 'ucenter-collect'
                }
            ]
        }
    ]
}

二 创建页面

1 ucenter.vue

<template>
  <!-- 内容区域 -->
  <div class="bg-fa of">
    <section class="container">
      <div class="u-body mt40">
        <menu class="col-3 fl uMenu">
          <header class="comm-title"><h2 class="fl tac"><span class="c-333">个人中心</span></h2></header>
          <dl>
            <dd class="u-m-dd">
              <ul>
                <li>
                  <span>Wo的资料</span>
                  <ol>
                    <li>
                      <a href="/ucenter" title="">
                        基本资料
                      </a>
                    </li>
                    <li>
                      <a href="uc_avatar.html" title="">
                        个人头像
                      </a>
                    </li>
                    <li>
                      <a href="uc_password.html" title="">
                        密码设置
                      </a>
                    </li>
                  </ol>
                </li>
              </ul>
              <ul>
                <li>
                  <span>Wo的学习</span>
                  <ol>
                    <router-link to="/ucenter/order" tag="li" active-class="current" exact>
                      <a>我的订单</a>
                    </router-link>
                    <router-link to="/ucenter/collect" tag="li" active-class="current" exact>
                      <a>我的收藏</a>
                    </router-link>
                  </ol>
                </li>
              </ul>
              <ul>
                <li>
                  <span>Wo的问答</span>
                  <ol>
                    <li>
                      <a href="uc_question.html" title="">
                        Wo的提问
                      </a>
                    </li>
                    <li>
                      <a href="uc_anwser.html" title="">
                        Wo的回答
                      </a>
                    </li>
                  </ol>
                </li>
              </ul>
              <ul>
                <li >
                  <span>Wo的消息</span>
                  <ol>
                    <li>
                      <a href="uc_letter.html" title="">系统消息</a>
                    </li>
                  </ol>
                </li>
              </ul>
            </dd>
          </dl>
        </menu>
        <nuxt-child />
        <div class="clear"/>
      </div>
    </section>
  </div>
  <!-- /内容区域 -->
</template>
<script>
export default {
}
</script>

2 index.vue

<template>
  <div>
    个人中心基本资料页面
  </div>
</template>

<script>
export default {
}
</script>

3 order.vue

<template>
  <div>
    <h3>我的订单页面</h3>
  </div>
</template>

<script>
export default {
}
</script>

4 collect.vue

<template>
  <div>
    <h3>我的收藏页面</h3>
  </div>
</template>
<script>
export default {
}
</script>

三 测试