第三十五节:Vue路由:Vue-router路由嵌套使用

前沿:

嵌套路由，主要是由我们的页面结构所决定的。当我们进入到home页面的时候,如果下面还有分类,当我们点击这些分类的时候,他还是需要路由到各个部分的.

简而言之: 就是如果在一个组件内也有需要动态切换组件的时候,就需要用到嵌套路由

1. 嵌套组件的需求

如下案例需求:

image

案例需求分析

1. 首页,文章,关于作者, 三个链接对应下面三个组件
2. 可是在文章展示组件中又分成了左右两栏
3. 左侧有是一组导航, 每一个点击,右侧都会有内容发生变化
4. 这就是嵌套路由,在一级路由文章展示的组件中又有路由跳转

如何实现示例:

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组件说明

1. article组件中还有子路由,router-link,
2. router-linkto属性是一个完整的路由,
3. 子路由对应组件显示的位置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 路由映射关系的实现

路由关系映射说明:

1. 因为/article路由对应的组件中还有二级路由跳转
2. vue提供了一个children属性,来配置/article路由中的二级路由
3. 注意children是一个数组, 因为二级路由不止一个
4. 注意二级路由的path值不用添加/, vue在将一级路由和二级路由拼接时自动加/
5. 其他的二级路由配置和一级路由一样

// 配置路由映射关系
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>