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

前沿:

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

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

1. 嵌套组件的需求

如下案例需求:

image

案例需求分析

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

如何实现示例:

2. 嵌套组件的实现

2.1 一级路由映射的组件

2.1.1 home组件

2.1.2 about组件

2.1.3 article组件

article组件说明

1. article组件中还有子路由,router-link,
2. router-linkto属性是一个完整的路由,
3. 子路由对应组件显示的位置router-view

2.2 article组件中的二级组件

2.2.1 HTML文章组件

2.2.2 Node 文章组件

2.2.3 Vue 文章组件

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