vue----webpack模板----children子路由，路由嵌套

最新推荐文章于 2025-05-24 19:23:49 发布

weixin_30340353

最新推荐文章于 2025-05-24 19:23:49 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/SRH151219/p/10426669.html

本文深入讲解了路由嵌套的概念，特别是在网页开发中如何利用共有的侧边栏组件和变化的内容组件进行组合，形成新的组件，以实现点击按钮时右侧内容变化而左侧侧边栏不变的效果。文章通过具体的代码示例，展示了子路由与父路由之间的关系，帮助读者更好地理解和应用路由嵌套。

路由嵌套

一种是每个路由到的组件都有共有的内容，这时把共有的内容抽离成一个组件，变化的内容也是一个组件，两种组件组合嵌套，形成一个新的组件

案例：

　对于共有的内容，典型的代表就是网页的侧边栏，

假设侧边栏在左边，我们点击其中的按钮时，右侧的内容会变化，但不管右侧的内容怎么变化，左侧的侧边栏始终存在。这个侧边栏就是共有内容，如下图所示

  {
      path:"/main",
      name:"main",
      component:main
      children:[
        {
          path:"shouye",
          name:"shouye",
          component:shouye
        },
        {
          path:"guanyuwomen",
          name:"fu",
          component:about
        },
        {
          path:"three",
          name:"three",
          component:three
        },
      ]
    },