vue-router使用笔记--嵌套路由

对比以下两种路由配置方法的不同效果：

<div class="home" ref="home">
    <div class="btn">
      <router-link class="route" to="/shopAnalyse/index">店铺</router-link>
      <router-link class="route" to="/cigareteAnalyse/index">卷烟</router-link>
    </div>

     <router-view></router-view> 
  </div>
{
      path: "/home",
      name: "home",
      component: Home,
      meta: {
        title: "首页"
      },
      children: [  //嵌套在代码中的<router-view>对应的页面路由要写在children里
        {
          path: "/cigareteAnalyse/index",
          name: "cigareteAnalyse",
          component: () => import("@/views/cigareteAnalyse/index"),
          meta: {
            title: ""
          }
        },
      ]
    }

效果

<div class="home" ref="home">
    <div class="btn">
      <router-link class="route" to="/shopAnalyse/index">店铺</router-link>
      <router-link class="route" to="/cigareteAnalyse/index">卷烟</router-link>
    </div>
  </div>
  {
      path: "/shopAnalyse/index",
      name: "shopAnalyse",
      component: () => import("@/views/shopAnalyse/index"),
      meta: {
        title: "店铺首页"
      },
      children: [  
        {
          path: "/cigareteAnalyse/index",
          name: "cigareteAnalyse",
          component: () => import("@/views/cigareteAnalyse/index"),
          meta: {
            title: ""
          }
        },
      ]
    },
    {
      path: "/cigareteAnalyse/index",
      name: "cigareteAnalyse",
      component: () => import("@/views/cigareteAnalyse/index"),
      meta: {
        title: "卷烟首页"
      }
    },
    {
      path: "/home",
      name: "home",
      component: Home,
      meta: {
        title: "首页"
      }
    }

参考：嵌套路由官方文档