个人中心嵌套路由的实现

末蓝、 2021-07-24 20:31 419阅读 0赞

# 一 嵌套路由 #

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

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

假设文件结构如：

![20210103100459900.png][]

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>

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[20210103100459900.png]: /images/20210724/51e824289ab545d9a51229601f70ef00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/5d9a515eed844be4a8f529a43f4c0ac0.png