Vue 中路由在使用的时候 嵌套 使用是非常频繁的，所以本文我们就来通过案例来介绍下嵌套路由的使用。

一、Vue路由嵌套

1.正常路由案例

  我们先来准备一个普通的路由案例

    
    
    
    
    
    



    

        
        登录
        注册

        
    

    

效果如下

在这里插入图片描述

2.嵌套路由案例

  接下来我们看下 嵌套路由 的实现，

2.1 添加两个组件模板

在这里插入图片描述

2.2 修改登录组件

  我们在登录组件中再嵌套一个路由模块，因为内容比较多，所以我们把这个 template 提取出来

在这里插入图片描述

2.3 路由 children 使用

  接下来我们需要配置嵌套的路由，具体如下:

在这里插入图片描述

注意 通过children 配置的 path 中的路由地址 不能加 / 开头。

2.4 效果

  具体实现效果如下:

在这里插入图片描述

效果搞定~

完整代码如下:

    
    
    
    
    
    


    
        
客户中心

        登录
        注册

        
    

    

    

二、路由案例

  接下来我们通过Router来实现一个经典页面布局的案例

效果如下

在这里插入图片描述

代码

注意:

• 路由匹配的时候如果有多个 组件模块 我们需要通过 components 来处理
• 同时在现在组件的时候，每个 组件 对应一个 router-view 标签，且通过 name属性来绑定，如下

在这里插入图片描述

在这里插入图片描述

搞定~