vue-router 4 將默認 url 重定向到找不到頁面

Question

我正在按照 vue 遷移官方文檔將我的 vue 應用程序 vue 2 遷移到 vue 3。 我已經更新了 vue-router package。 更新 router.js 后，如果我默認在本地運行應用程序，它會路由到 404 page not found 組件。

以前，它是路由到概覽頁面（http://localhost:8080/overview）。 現在這個 url 正在路由到找不到頁面。 這是我的 router.js

路由器.js

    /* [IMPORT] Library */
import { createRouter, createWebHistory } from 'vue-router';
/* [IMPORT] Common module */
import store                  from '~/common/store';
/* [IMPORT] modules */
import devModule              from '~/module/devModule';
import pageNotFoundPage       from '~/page/common/pageNotFound';

/* [IMPORT][PAGE] OverView */
import overviewPage           from '~/page/overview/overviewPage';

const routes = [

        { path: '/'   , redirect: '/dev'},
        { path: '/dev', component: devModule, children: [
            /* Default routing*/
            { path: '', redirect: 'overview/overview'},
            /* OVERVIEW */
            { path: 'overview', redirect: 'overview/overview'},
            { path: 'overview/overview' ,   component: overviewPage}
        ]},
        /* [404] anything else... */
        { path: '/:catchAll(.*)'   , component: pageNotFoundPage },
    ];

    export const router = createRouter({ history: createWebHistory(), routes });

/* [intercepter] */
router.beforeEach(function(to, from, next) {
    // 1. Update current URL :: for store
    store.commit('moveMenu',to.path);
    // x. go to next menu
    next();
});
export default router;

為什么遷移后沒有路由到概覽頁面？ 任何建議或指南都會對此有所幫助。

Answer 1

您應該將子路由路徑與父路徑連接起來，例如：

http://localhost:8080/dev/overview

有關更多詳細信息，請查看官方文檔中的嵌套路由部分