vue3 - 36.router.6 - 嵌套路由

嵌套路由的使用场景：

比如手机端，底部有四个或者五个子路由页面，当我们点击底部路由的时候，页面进行切换

或者我们常见的后台管理系统，左侧为导航，右侧为导航对应的页面内容

1.嵌套路由可以通过children的方式来声明，children接收的是一个数组，数组中可以定义无限个子路由

我们新建三个路由页面，并且在router/index.ts中声明嵌套路由：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes:Array<RouteRecordRaw> = [
    {
        path:'/index',
        name:'main',
        component:() => import('../components/Main/index.vue'),
        children:[
            {
                path:"/index",
                name:"index",
                component:() => import('../views/index/index.vue'),
            },{
                path:"/classify",
                name:"classify",
                component:() => import('../views/classify/index.vue'),
            },{
                path:"/me",
                name:"me",
                component:() => import('../views/me/index.vue'),
            }
        ]
    }
]
const router = createRouter({
    history:createWebHistory(),
    routes
})
export default router

我们再单独新建一个承载整个项目的总路由，比如mian.vue

main.vue：

<template>
    <div>
        <RouterView />
        <br />
        <RouterLink :to="{path:'/index'}">首页</RouterLink>
        <br />
        <RouterLink :to="{path:'/classify'}">分类</RouterLink>
        <br />
        <RouterLink :to="{path:'/me'}">我的</RouterLink>
    </div>
</template>
<script setup lang='ts'>
  import { RouterView,RouterLink } from 'vue-router';
</script>

我们可以把底部跳转封装成一个路由子组件并且引用，css布局样式略