vue嵌套路由子路由 path 注意

蓓蕾心晴

发布于 2023-02-17 13:34:54

7500

发布于 2023-02-17 13:34:54

文章被收录于专栏：前端小叙

子路由的地址如果是希望拼接父路由地址，子路由的 path 仅写名称，不写 “/”，如果希望是另外的地址，则直接以 “/” 开头。

{
        path: "/lifetools",
        name: "lifetools",
        component: () =>
            import(/* webpackChunkName: "LifeTools" */ "@/views/LifeTools.vue"),
        children: [
            {
                path: "caculator", // 最终生成路由   /lifetools/caculator
                                // path: "/caculator", // 最终生成路由   /caculator
                name: "Caculator",
                component: () =>
                    import(/* webpackChunkName: "CodeTools" */ "@/views/Caculator.vue"),
            },
]

摘自官方文档：