vue 路由器中的本地化 url 不起作用并返回错误答案

【问题标题】：Localized urls in vue router not working and returning an errorvue 路由器中的本地化 url 不起作用并返回错误
【发布时间】：2021-08-18 14:17:33
【问题描述】：

尝试使用 vue-router 向 url 添加语言前缀，但返回错误消息：Uncaught Error: Missing required param "locale" 我正在尝试添加支持语言前缀的路由，如 en、de、nl、fr 等上...

我确实看到我正在使用我猜实际上不需要的子路由......！

example.com/en/users
example.com/nl/users
example.com/fr/users

routes.js

const routes = [
    {
        path: "/",
        redirect: 'en'
    },
    {
        path: '/:locale',
        //path: '/:locale?', // this will work but it wont render the component
        name:'locale',
        component: {
            template: '<router-view />'
        },
        children:[
            { path: 'welcome', name: 'dashboard', component: page('Dashboard.vue'),
            },
            { path: 'users/index', name: 'users.index', component: page('Users/Index.vue'),
                children:[
                    { path: 'create', name: 'users.create', component: page('Users/Create.vue') } 
                ]
            },
        ]
    },
]

router.js

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

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

【问题讨论】：

path: ':locale',怎么样
未捕获的错误：路由路径应以“/”开头：“:locale?”应该是“/:locale?”。

标签： vue-router vuejs3

【解决方案1】：

如果您的组件上有 <router-link>s 缺少语言环境参数，您可能会在 Vue 3 中收到此错误。

例如，如果出现这样的 DOM 标记：

<router-link :to="{ name: 'dashboard' }">
    Dashboard
</router-link>

改成：

<router-link :to="{ name: 'dashboard', params: { locale: 'en' } }">
    Dashboard
</router-link>

错误可能源于尝试加载的任何组件。例如，您可能有一个 TopNavBar.vue 组件与您的预期组件一起呈现，因此请检查。

【讨论】：