個人中心嵌套路由的實現

一 嵌套路由

創建內嵌子路由，你需要添加一個 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>

三 測試