Vue-router多级路由基本操作（合理解决多个嵌套的公共页面）

---

前言

最近在项目中遇到了一个新需求，虽然通过router一级路由也可以实现最终效果，但会导致代码冗余过多，不利于模块化，由此决定学习并使用Vue-router多级目录

一、操作步骤

1.router配置

首先，我们要在项目中建立router文件夹，并在里面创建好index.js，以博主的需求举例子，项目里有两个一级目录，登录和展示，展示页下有三个小目录

以下就是博主的index.js配置，在一级目录下使用children属性，将二级目录放入所属的父路由中，路由访问的路径和根据自己的项目变化

import {createRouter, createWebHashHistory} from "vue-router";

// 路由信息
const routes = [
    {
        path: "/index",
        name: "Index",
        component:  () => import('../views/Main.vue'),
        children:[
            {
                path: "Home",
                name: "Home",
                component:  () => import('../views/Home/Index.vue'),
            },
            {
                path: "Environment",
                name: "Environment",
                component:  () => import('../views/Environment/Index.vue'),
            },
            {
                path: "Internation",
                name: "Internation",
                component:  () => import('../views/Internation/Index.vue'),
            },
        ],
    },
    {
        path: "/Login",
        name: "Login",
        component:  () => import('../views/Login.vue'),
    }
];

// 导出路由
const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

2.router-view使用

博主把一级目录使用的router-view放在App.vue里，这样可以将登陆页和展示页分割开

接下来把二级目录使用的router-view放在父路由对应的组件内，博主二级目录的router-view就放在了index路由对应的Main.vue组件里，这样就可以确保公共资源的复用性，不会存在代码冗余，比如我们需要访问展示页下的首页，我们需要访问的路径应该是项目路径+index/Home，因为我们在children里面配置的path并没有添加/,如果我们在children的路径里添加/，比如path:"/Home",我们就可以直接访问项目路径+/Home

总结

上述内容如果存在问题，欢迎大家批评指正！！！