为 vue 路由器中的每条路由添加语言前缀

Question

处理翻译和翻译的 url 时，我似乎无法使路由正常工作。当我点击一个路由（路由器链接）时，它会将我重定向到没有语言前缀的 url。

users/delete -> en/users/delete

<router-link :to="{ name: users.delete }">Delete users</router-link>
// renders to 
<a href='users/delete'>Delete users</a>
// what I want
<a href='en/users/delete'>Delete users</a>

router.js

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: `/:locale(nl|en|de|fr)?`,
            component: () => import('../Pages/Page.vue'),
            children: routes
        }
    ] 
});

我不想在每个路由器链接中添加 $i18.locale 变量作为解决方案