前端项目页面分级

134 阅读1分钟

分级

  • App.vue
    • Home.vue
      • 主页
      • My.vue
      • 订单
      • ...需要底部导航栏
    • Login.vue
    • ...等单页面级

路由设置

const routes: RouteRecordRaw[] = [  
    {  
        path: '/home',  
        name: "Home",  
        component: () => import("../pages/Home.vue"),  
        children: [  
            {  
                path: "/home/first",  
                name: "First",  
                component: () => import("../pages/Fun/First.vue"),  
                meta: {  
                    index: 1,  
                }  
            },  
            {  
                path: "/home/travelServices",  
                name: "TravelServices",  
                component: () => import("../pages/Fun/TravelServices.vue"),  
                meta: {  
                    index: 2,  
                }  
            },  
            {  
                path: "/home/orders",  
                name: "Orders",  
                component: () => import("../pages/Fun/Orders.vue"),  
                meta: {  
                    index: 3,  
                }  
            },  
            {  
                path: "/home/railwayMembership",  
                name: "RailwayMembership",  
                component: () => import("../pages/Fun/RailwayMembership.vue"),  
                meta: {  
                    index: 4,  
                }  
            },  
            {  
                path: "/home/my",  
                name: "My",  
                component: () => import("../pages/Fun/My.vue"),  
                meta: {  
                    index: 5,  
                }  
            },  
            {  
                path: "/home",  
                redirect: () => "/home/first",  
            }  
        ]  
    },  
    { // 选择日期  
        path: "/selectionDate",  
        name: "SelectionDate",  
        component: () => import("../pages/Fun/SelectionDate.vue"),  
        meta: {  
            index: 2,  
        }  
    },  
    { // 选择地址  
        path: "/addressPage",  
        name: "AddressPage",  
        component: () => import("../pages/Fun/AddressPage.vue"),  
        meta: {  
            index: 2,  
        }  
    },  
    // 登录  
    {  
        path: "/login",  
        name: "Login",  
        component: () => import("../pages/Login.vue")  
    },  
    //重定向  
    {  
        path: "/",  
        redirect: () => "/home"  
    }  
]

4.png