英文:
Nuxt i18n Calling useRoute within middleware may lead to misleading results
问题
在Nuxt 3中,我收到了以下警告:
“在中间件内部调用useRoute可能会导致误导的结果。相反,使用传递给中间件的(to,from)参数来访问新旧路由。”
这是因为我在我的中间件中调用了useLocalePath()。
这是其中一个发生这种情况的中间件:
export default defineNuxtRouteMiddleware(async(to, from) => {
const localPath = useLocalePath()
const isUserAuthenticated = await isAuthenticated()
if (isUserAuthenticated) {
if (to.fullPath === localPath('login') || to.fullPath === localPath('register')) {
return navigateTo(localPath('/'))
}
} else {
if (to.fullPath !== localPath('login') && to.fullPath !== localPath('register')) {
return navigateTo(localPath('login'))
}
}
})
我在我的nuxt.config.ts中有这个:
i18n: {
lazy: true,
langDir: "locales",
strategy: "prefix_and_default",
locales: [
{
code: 'nl-Nl',
iso: 'nl-Nl',
name: 'Dutch',
file: 'nl-NL.json'
},
{
code: 'en',
iso: 'en',
name: 'English',
file: 'en.json'
},
],
detectBrowserLanguage: {
useCookie: true,
cookieCrossOrigin: true,
alwaysRedirect: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root'
},
defaultLocale: "nl-Nl",
customRoutes: 'config',
pages: {
pricing: {
en: '/pricing',
'nl-Nl': '/prijzen',
}
}
}
这是我使用的i18n版本:
"@nuxtjs/i18n": "^8.0.0-beta.12",
事实上,这段代码完全正常工作,但我不知道为什么会出现这个警告。
是否可以忽略这个警告?
英文:
So I am getting this warning in nuxt3:
Calling useRoute within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.
This happens because I am calling useLocalePath()
in my middleware.
This is one of the middleware where it happens:
export default defineNuxtRouteMiddleware(async(to, from) => {
const localPath = useLocalePath()
const isUserAuthenticated = await isAuthenticated()
if (isUserAuthenticated) {
if (to.fullPath === localPath('login') || to.fullPath === localPath('register')) {
return navigateTo(localPath('/'))
}
} else {
if (to.fullPath !== localPath('login') && to.fullPath !== localPath('register')) {
return navigateTo(localPath('login'))
}
}
})
I have this in my nuxt.config.ts:
i18n: {
lazy: true,
langDir: "locales",
strategy: "prefix_and_default",
locales: [
{
code: 'nl-Nl',
iso: 'nl-Nl',
name: 'Dutch',
file: 'nl-NL.json'
},
{
code: 'en',
iso: 'en',
name: 'English',
file: 'en.json'
},
],
detectBrowserLanguage: {
useCookie: true,
cookieCrossOrigin: true,
alwaysRedirect: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root'
},
defaultLocale: "nl-Nl",
customRoutes: 'config',
pages: {
pricing: {
en: '/pricing',
'nl-Nl': '/prijzen',
}
}
}
This is the version of i18n that i'm using:
"@nuxtjs/i18n": "^8.0.0-beta.12",
The thing is, the code is working perfectly fine, but I don't have any clue why it's giving me this warning.
Is it safe to ignore this warning?
答案1
得分: 3
这对我有用
export default defineNuxtRouteMiddleware(async (to, from) => {
const nuxt = useNuxtApp()
const isUserAuthenticated = await isAuthenticated()
if (isUserAuthenticated) {
if (to.fullPath === nuxt.$localePath('login') || to.fullPath === nuxt.$localePath('register')) {
return navigateTo(nuxt.$localePath('/'))
}
} else {
if (to.fullPath !== nuxt.$localePath('login') && to.fullPath !== nuxt.$localePath('register')) {
return navigateTo(nuxt.$localePath('login'))
}
}
})
英文:
This works for me
export default defineNuxtRouteMiddleware(async(to, from) => {
const nuxt = useNuxtApp()
const isUserAuthenticated = await isAuthenticated()
if (isUserAuthenticated) {
if (to.fullPath === nuxt.$localePath('login') || to.fullPath === nuxt.$localePath('register')) {
return navigateTo(nuxt.$localePath('/'))
}
} else {
if (to.fullPath !== nuxt.$localePath('login') && to.fullPath !== nuxt.$localePath('register')) {
return navigateTo(nuxt.$localePath('login'))
}
}
})
答案2
得分: 0
useLocalePath()
使用底层的 useRoute()
方法,所以你会收到那个警告。一个解决方法是改用 useI18n()
并访问 App 的 locale 变量。
const { locale } = useI18n();
if (!to.fullPath.includes("login")) {
return navigateTo(`${locale.value}/login`);
}
英文:
useLocalePath()
uses the useRoute()
method under the hood that's why you are getting that warn. one solution could be to use useI18n()
instead and accesing the App locale variable.
const { locale } = useI18n();
if (!to.fullPath.includes("login")) {
return navigateTo(`${locale.value}/login`);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论