Vue router 二级默认路由设置

一、起因

打开默认地址 / （http://localhost:5432/），home 页面有空白，因为没有指定默认打开的子页。

// router.js
export const constantRoutes = [
    {
        path: '/',
        component: () => import('@/views/MainView'),
        name: 'Index',
        meta: { keepAlive: false },
        children: [
            {
                path: '/enc',
                component: () => import("@/components/Enc"),
                name: 'enc',
                meta: { keepAlive: false },
            },
            {
                path: '/about',
                component: () => import("@/components/About"),
                name: 'about',
                meta: { keepAlive: false },
            }
        ]
    }
]
const router = createRouter({
    history: createWebHashHistory(import.meta.env.VITE_APP_BASE_PATH),
    routes: constantRoutes,
});

二、设置

要设置 redirect 属性。

export const constantRoutes = [
    {
        path: '/',
        component: () => import('@/views/MainView'),
        name: 'Index',
        redirect: '/enc',
        meta: { keepAlive: false },
        children: [
            {
                path: '/enc',
                component: () => import("@/components/Enc"),
                name: 'enc',
                meta: { keepAlive: false },
            },
            {
                path: '/about',
                component: () => import("@/components/About"),
                name: 'about',
                meta: { keepAlive: false },
            }
        ]
    }
]
const router = createRouter({
    history: createWebHashHistory(import.meta.env.VITE_APP_BASE_PATH),
    routes: constantRoutes,
});