How to catch routing on 404 in vue3. if the initial routing starts with the /:id parameter?

Question

Vue.js

we get into the web application with id (uuid) in the url.
Link example site.ru/123-456-789
Further, inside the web application, it goes through internal urls with this id.
Site.ru/123-456-789/page1/ URL example

_ _
_
456-789/page1/wrong-url-1/

Question 2: if the id (uuid) part of the url was deleted. how to send the same to 404

const routes = [
    {
        path: '/:id/',
        component: Main,
        children: [
            {
                path: 'page1',
                name: "Page1",
                component: () => import('../views/Page1'),
            },
            {
                path: 'page2',
                name: 'Page2',
                component: () => import('../views/Page2'),
            }
        ]
    },
    {
        path: '/:pathMatch(.*)*',
        name: "page404",
        component: () => import('../views/Error404'),
    },
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
});

router.beforeEach((to, from, next) => {
    store.dispatch('setUrlParams',  to.params)
        .then(() => {
            return store.dispatch('setData')
        })
        .then(() => {
            next();
        })
});

Answer 1

How to catch routing on 404 in vue3. if the initial routing starts with the /:id parameter?

const routes = [
    {
        path: '/:id/',
        component: Main,
        children: [
            {
                path: 'page1',
                name: "Page1",
                component: () => import('../views/Page1'),
            },
            {
                path: 'page2',
                name: 'Page2',
                component: () => import('../views/Page2'),
            }
        ]
    },
    {
        path: '/:id/*',
        name: "page404",
        component: () => import('../views/Error404'),
    },
]