一 嵌套路由
创建内嵌子路由,你需要添加一个 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>
三 测试