Laravel crud VueJS dynamic url i18n

Question

I'm doing crud with Laravel, I have a relational table like below, What I want to do is like this, with vue router http://localhost/corporate/about-us I want to have a url in style, but I couldn't quite figure out how to do it. the vue part I need, and I want to do it without mirroring it to the user. how can i do it?

SELECT * FROM `categories`

id
title
slug

id	title	slug
1	Corporate	corporate
2	Services	services
3	Useful Information	useful-information

SELECT * FROM `pages`

id
title
slug
content
category_id

id	title	slug	content	category_id
1	About Us	about-us	lorem lorem about	1
2	Mission	mission	lorem lorem mission	1
3	Transportation	Transportation	lorem lorem trans	2
4	Personal Care	personal-care	lorem lorem	3

Vue app.js

import {createApp} from 'vue';
import App from './App.vue'
import i18n from './i18n';
import WebsiteRouter from './Website/router';
axios.defaults.withCredentials = true;

createApp(App)
    .use(WebsiteRouter)
    .use(i18n)
    .mount("#app");

i18n.js

import {createI18n} from "vue-i18n/index";

function loadLocaleMessages() {
    const locales = require.context(
        "./language/locales",
        true,
        /[A-Za-z0-9-_,\s]+\.json$/i
    );
    const messages = {};
    locales.keys().forEach((key) => {
        const matched = key.match(/([A-Za-z0-9-_]+)\./i);
        if (matched && matched.length > 1) {
            const locale = matched[1];
            messages[locale] = locales(key)
        }
    })
    return messages;
}

const i18n = createI18n({
    // legacy: false,
    globalInjection: true,
    locale: "tr",
    fallbackLocale: "en",
    messages: loadLocaleMessages(),
});
export default i18n;

routes.js

import i18n from "../../i18n";

export default [
    {
        path: '/',
        redirect: `/${i18n.global.locale}`
    },
    {
        path: '/:lang',
        name: 'lang',
        component: {
            template: '<router-view />',
        },
        children: [
            {
                path: '',
                component: () => import('../Views/Home.vue'),
                name:'home',
            },
            {
                path: '/:catetegory',
                component:()=>import('../Views/Category.vue')
            },
            {
                path: 'contact',
                component: () => import('../Views/Contact.vue'),
                name: 'contact',

            },
        ]
    },
];

router/index.js

import {createRouter, createWebHistory} from 'vue-router'
import i18n from "../../i18n";
import routes from './routes'


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

router.beforeEach((to, from, next) => {

    let language = to.params.lang;
    if (!language) {
        language = 'en'
    }
    i18n.global.locale = language
    next()

})

export default router;