vue-路由嵌套

网页页面从登录、注册首页进行路由切换，在进入首页之后又会出现新的导航用于切换新的页面导航，这样的导航跳转属于路由嵌套-----简单来说就是“套娃”

 例：在布局组件Layout.vue中添加新的导航

<template>
  <div class="layout-container">
      <!-- 展示嵌套路由对应的组件的位置 -->
      <router-view></router-view>
      
      <!-- 定义嵌套路由的导航链接 -->
      <nav>
        <div><router-link to="/main/home">主页</router-link></div>
        <div><router-link to="/main/goods">商品</router-link></div>
        <div><router-link to="/main/profile">用户</router-link></div>
        <div><router-link to="/main/concat">我</router-link></div>
      </nav>
  </div>
</template>

编辑路由模块router/index.js,调整匹配规则，添加二级路由

const routes = [
    ...
    { 
        path: "/main", 
        component: Layout,
        meta: {
            title: "系统首页"
        },
        redirect: "/main/home",		// 展示布局组件时，自动展示主页组件
        children: [					// 定义嵌套路由
            {
                path: "home",
                component: Home
            },
            {
                path: "goods",
                component: Goods
            },
            {
                path: "profile",
                component: Profile
            },
            {
                path: "concat",
                component: Concat
            }
        ]
    }
]

主要流程总结：

1、在布局组件中定义嵌套路由的导航链接<router-link to = " 路径 ">页面内容</router-link>

2、展示嵌套路由对应组件位置<router-view></router-view>

3、路由模块找到需要嵌套的模块 ：如Layout组件，给其添加children，里面添加路由匹配规则，通常给嵌套的路由界面展示布局组件时，重定向为主页页面