前沿:
嵌套路由,主要是由我们的页面结构所决定的。当我们进入到home页面的时候,如果下面还有分类,当我们点击这些分类的时候,他还是需要路由到各个部分的.
简而言之: 就是如果在一个组件内也有需要动态切换组件的时候,就需要用到嵌套路由
1. 嵌套组件的需求
如下案例需求:
案例需求分析
- 首页,文章,关于作者, 三个链接对应下面三个组件
- 可是在文章展示组件中又分成了左右两栏
- 左侧有是一组导航, 每一个点击,右侧都会有内容发生变化
- 这就是嵌套路由,在一级路由文章展示的组件中又有路由跳转
如何实现示例:
2. 嵌套组件的实现
2.1 一级路由映射的组件
2.1.1 home组件
<template>
<div id="home">
<h2>欢迎您来到首页</h2>
<p>首页带你展示全部信息</p>
</div>
</template>
<script>
export default {
name:"Home"
}
</script>
<style>
</style>
2.1.2 about组件
<template>
<div id="about">
<h2>欢迎来到作者页面</h2>
<p> 告诉你作者最全面的信息 </p>
</div>
</template>
<script>
export default {
name:"About",
}
</script>
<style>
</style>
2.1.3 article组件
article组件说明
- article组件中还有子路由,
router-link
, -
router-link
to属性是一个完整的路由, - 子路由对应组件显示的位置
router-view
<template>
<div id="article">
<div class="nav-left">
<ul class="left-list">
<router-link tag="li" to="/article/html">HTML文章</router-link>
<router-link tag="li" to="/article/node">Node文章</router-link>
<router-link tag="li" to="/article/vue">Vue文章</router-link>
</ul>
</div>
<div class="article-content">
<h2>欢迎您来到文章页面</h2>
<p>这里有最好看的内容</p>
<div class="show-article">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name:"Article"
}
</script>
<style>
</style>
2.2 article组件中的二级组件
2.2.1 HTML文章组件
<template>
<div id="htmlarticle">
<p>这里是html文章等内容</p>
</div>
</template>
<script>
export default {
name:"Htmlarticle",
}
</script>
<style>
</style>
2.2.2 Node 文章组件
<template>
<div id="nodearticle">
<p>这里是node文章等内容</p>
</div>
</template>
<script>
export default {
name:"Nodearticle",
}
</script>
<style>
</style>
2.2.3 Vue 文章组件
<template>
<div id="vuearticle">
<p>这里是vue文章等内容</p>
</div>
</template>
<script>
export default {
name:"Vuearticle",
}
</script>
<style>
</style>
2.3 路由映射关系的实现
路由关系映射说明:
- 因为
/article
路由对应的组件中还有二级路由跳转 - vue提供了一个children属性,来配置
/article
路由中的二级路由 - 注意children是一个数组, 因为二级路由不止一个
- 注意二级路由的path值不用添加
/
, vue在将一级路由和二级路由拼接时自动加/
- 其他的二级路由配置和一级路由一样
// 配置路由映射关系
const routes = [
{
path:'/',
redirect: "/home"
},
{
path:'/home',
component: Home
},
{
path:'/article',
component: Article,
// 子路由, 先匹配主路由成功后,才会进入子路由匹配
// /article/html 这个路由能匹配到二级路由
// /aa/html 这个匹配不到二级路由, 一级路由都没有匹配成功
children:[
{
path:'html',
component: HTMLArticle
},
{
path:'node',
component: NodeArticle
},
{
path:'vue',
component: VueArticle
}
]
},
{
path:'/about',
component: About
}
];
2.4 主入口组件APP.vue
<template>
<div id="app">
<!-- 导航 -->
<div class="nav">
<ul class="list">
<router-link tag="li" to="/home">首页</router-link>
<router-link tag="li" to="/article">文章展示</router-link>
<router-link tag="li" to="/about">关于作者</router-link>
</ul>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>