10.21vue嵌套路由和扁平路由（父、子路由）区别

在Vue Router中，配置子路由（嵌套路由）与配置全部为父路由（扁平路由）有以下几个主要的区别和影响：

vue2中src/router/index.js中配置router路由信息

 

子路由（嵌套路由）

组件结构：子路由通常用于创建嵌套的视图结构，例如，在一个页面内嵌套多个组件。父组件可以包含多个子组件，每个子组件都有自己的路径。

 

URL结构：子路由会在父路由的路径基础上添加额外的路径，例如，如果有一个父路由/parent，子路由可以是/parent/child。

 

视图渲染：父组件的<router-view>用于渲染子路由对应的组件。这意味着，在访问子路由时，父组件的模板会首先渲染，然后在其内部的<router-view>中渲染子组件。

 

导航守卫：子路由可以有自己的导航守卫，同时也会继承父路由的导航守卫。

 

命名空间：子路由通常用于创建具有相同命名空间的页面部分，比如在一个管理系统中，每个模块都可以有自己的子路由。

 

样例：

 

 

const router = new VueRouter({

  routes: [

    {

      path: '/parent',

      component: ParentComponent,

      children: [

        {

          path: 'child',

          component: ChildComponent

        }

      ]

    }

  ]

});

 

父路由（扁平路由）

组件结构：扁平路由通常意味着每个路由直接映射到一个顶级组件，没有嵌套关系。

 

URL结构：每个路由都是独立的，不依赖于其他路由的路径。

 

视图渲染：在扁平路由结构中，每个路由都直接渲染到根级别的<router-view>中。

 

导航守卫：每个路由的导航守卫都是独立的，不会受到其他路由的影响。

 

命名空间：扁平路由结构通常用于小型应用或者不要求复杂嵌套关系的应用。

 

样例：

 

 

const router = new VueRouter({

  routes: [

    {

      path: '/parent',

      component: ParentComponent

    },

    {

      path: '/child',

      component: ChildComponent

    }

  ]

});

 

影响

用户体验：子路由可以提供更流畅的用户体验，用户在浏览嵌套内容时不需要离开当前页面。

代码组织：子路由有助于组织代码，使得具有相关功能的组件可以分组在一起。

路由管理：对于大型应用，嵌套路由可能更难以管理，因为需要维护更复杂的路由结构。

性能：扁平路由可能略微提高性能，因为不需要处理嵌套组件的渲染。