[英]i18n locale change in url and nested routes
Call to help from the depths of Vue Router purgatory!来自Vue Router炼狱深处的呼救! I've now spent a few days combining several resources, but had no success in making internalization work with url routes in my particular set-up.
我现在已经花了几天的时间来组合多种资源,但在我的特定设置中使用 url 路由进行内部化方面没有成功。
Here's the gist: I have a project with nested router-views.这是要点:我有一个带有嵌套路由器视图的项目。 Structure is like so:
结构是这样的:
.
├── /step
│ ├── /1
│ ├── /2
│ └── /3
├── /join
└── /success
Here's what I've done so far:这是我到目前为止所做的:
{
path: '/',
beforeEnter(to, from, next) {
next(i18n.locale + '/step')
}
},
and in i18n.js:在 i18n.js 中:
//global variable to check language support
export const supportedLangs = ["de", "en"];
// check what url user has arrived at, retrieves "en", "de" etc
let langParam = window.location.pathname.slice(1,3)
export default new VueI18n({
locale: supportedLangs.includes(langParam) ? langParam : 'de',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages(),
})
{
path: '/:lang',
component: App,
beforeEnter(to, from, next) {
let lang = to.params.lang
if ( supportedLangs.includes(lang) ) {
if (i18n.locale !== lang) {
i18n.locale = lang
}
return next()
}
return next(i18n.locale)
}
}
I am facing 2 problems that I could use help with.我面临着 2 个可以使用帮助的问题。
PROBLEM 1: Un-nested routes don't render (for example www.app.com/de/join )问题 1:未嵌套的路由不呈现(例如www.app.com/de/join )
PROBLEM 2: Contents of App.vue that are outside get rendered twice, indicating the route nesting is not done correctly (I see double app bar) PROBLEM 2: App.vue 外面的内容被渲染了两次,表示路由嵌套没有正确完成(我看到了双应用栏)
I made a simplified playground with the code -> HERE我用代码做了一个简化的操场 - > 这里
Fingers crossed someone can perhaps note out where I went wrong!手指交叉有人也许可以指出我哪里出错了!
Okay, after hours and hours of testing I think I found a solution with the correct structure.好的,经过数小时的测试,我想我找到了一个结构正确的解决方案。 What I was missing was an empty component with for my dynamic language route.
我缺少的是用于我的动态语言路由的空组件。
const routes = [
{
path: "/",
beforeEnter(to, from, next) {
next(i18n.locale + "/step");
},
component: App
},
{
path: "/:lang",
component: { template: "<router-view />" },
beforeEnter(to, from, next) {
let lang = to.params.lang;
if (supportedLangs.includes(lang)) {
if (i18n.locale !== lang) {
i18n.locale = lang;
}
return next();
}
return next(i18n.locale);
},
children: [
{
path: "step",
redirect: "step/1",
name: "Start",
component: Steps,
children: [
{
path: "1",
name: "step1",
component: Step1
},
{
path: "2",
name: "step2",
component: Step2
},
{
path: "3",
name: "step3",
component: Step3
}
]
},
{
path: "join",
name: "join",
component: Join
},
{
path: "success",
name: "success",
component: Success
}
]
}
];
Here is the working version codesandbox. 这是工作版本代码和框。 No clue WHY exactly it's needed but it made my project work the way I needed so I won't question the universe for now :P
不知道为什么需要它,但它使我的项目按照我需要的方式工作,所以我现在不会质疑宇宙:P
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.