图解在vite下实现父子路由嵌套

一、安装路由插件

npm install vue-router@4

二、新建src/router/index.js 文件

复制以下代码至index.js文件内

// 引入需要的模块
import { createRouter,  createWebHistory } from 'vue-router'
import App from '../components/App.vue'
// 下面使用了es6的对象增强写法，命名必须是routes
const routes = [
    {
        //默认展示，这是主页面路由必须加斜杠 /
        path: '/',
        component: App,
    },
    {
      // 父路由 component路由懒加载
        path: '/Box_1',
        component: () => import('../pages/Box_1.vue'),
        //路由/Box_1重新定位的对象是/menu_2，默认展示的是/menu_2这个页面
        redirect: {path: '/menu_2'},
        // 子路由 component路由懒加载
        children: [
            {
              path: '/menu_1',
              component: () => import('../pages/Menu_1.vue')
            },
            {
              path: '/menu_2',
              component: () => import('../pages/Menu_2.vue')
            }
          ]
    },
    {
        path: '/Box_2',
        component: () => import('../pages/Box_2.vue')
    },
]
 
// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
// 导出路由
export default router

 三、配置main.js文件