我正在将 VueJS 项目转换为 Nuxt.js，但我在理解 nuxt 如何处理路由时遇到问题。它的文档没有说任何关于推送路线的内容。
使用 VueJS 我在一个组件中有以下内容。
//template
<input class="" type="search"
name="q" id="q" v-model="q"
@keyup.enter="submitSearch"
>
//script
methods: {
submitSearch() {
this.$route.push({name: 'search', query: {q: this.q}});
//also tried the following
//nuxt.$router.push({name: 'search', query: {q: this.q}});
}
}
但这在 Nuxt 中没有任何作用。发出警报('hi); submitSearch 内部触发很好，但我从未重定向到路由。
这里的目标是当用户在搜索栏中按下 Enter 键时，重定向到 /search?q=blablabla
编辑：
问题是用户被重定向到/?q=blablabla而不是/search?..
我刚刚意识到这是因为多语言路线有不同的名称。
我将如何推送到一个动态search命名的路由名称而不是“ ” search__en？
我已经开始将Vue 3 应用程序中的单元测试库的Jest 替换为Vitest 。
我正在尝试为使用vue-i18n库翻译其中文本的组件编写单元测试，但是当我尝试在测试文件中安装此组件时，它失败并出现错误：
参考错误：t 未定义
使用 vitest 库编写测试时t进行存根/模拟的正确方法是什么？import { useI18n } from 'vue-i18n'
请注意，自从从 Vue2 升级到 Vue3 后，这不起作用：
const wrapper = shallowMount(MyComponent, {
global: {
mocks: {
$t: () => {}
}
}
})
以下是一些值得注意的软件包版本的列表：
"vue": "^3.2.31",
"vue-i18n": "^9.2.0-beta.14",
"vite": "^2.9.0",
"vitest": "^0.10.2"
谢谢！
我需要找到一种在我的项目的设置脚本中使用$tof的方法i18nvue
我的 i18n 文件如下所示：
\nimport { createI18n } from 'vue-i18n'\nimport en from './en';\nimport es from './es';\n\nconst messages = { en, es };\n\nconst locales = [\n { code: 'en', name: 'English' },\n { code: 'es', name: 'Espa\xc3\xb1ol' }\n];\n\nconst i18n = createI18n({\n locales: locales,\n defaultLocale: 'en',\n fallbackLocale: 'en',\n messages,\n silentTranslationWarn: true,\n silentFallbackWarn: true,\n})\n\nexport default i18n\n我的主要js看起来像这样：
\nimport i18n from './lang/settings'\nconst application = createApp({ \n render: () => h(app, props) \n })\napplication.use(i18n)\n我可以完美地$t() …
有没有办法检查翻译是否存在？
<p v-if="$t('some_key')">{{ $t('some_key') }}</p>
在这种情况下，如果没有翻译，它将打印“some_key”。也许有一种方法可以配置全局回退？
我正在为我的 Vue3(typescript) 应用程序使用 vue-i18n 插件。下面是我在组件代码中的设置函数
首页.vue
import {useI18n} from 'vue-i18n'
setup() {
const {t} = useI18n()
return {
t
}
}
主.ts
import { createI18n } from 'vue-i18n'
import en from './assets/translations/english.json'
import dutch from './assets/translations/dutch.json'
// internationalization configurations
const i18n = createI18n({
messages: {
en: en,
dutch: dutch
},
fallbackLocale: 'en',
locale: 'en'
})
// Create app
const app = createApp(App)
app.use(store)
app.use(router)
app.use(i18n)
app.mount('#app')
代码可以正常工作并编译。但是在安装组件时，玩笑测试用例失败了
规格文件
import { mount, VueWrapper } from '@vue/test-utils'
import Home from '@/views/Home.vue'
import …使用 i18n 时，当语言/区域设置发生变化时，如何调用函数？
我应该使用 Vuex 还是vue-i18n有允许我这样做的方法？
尝试在具有组合 API 的组件中实现 vue-i18n。我希望能够在 onMounted 挂钩内设置一些翻译消息。在选项 api 中，我会使用this.$i18n.setLocaleMessage(locale, messages).
但是，this在组合 API 的 Setup() 方法中不可用。因此，当我尝试上述操作时，它给了我未定义的信息。我可以通过将 i18n 导入到组件中来做到这一点：
import { useI18n } from 'vue-i18n'然后创建它的一个实例var i18n = useI18n({}), i18n.setLocaleMessage()，但我更喜欢像第一个这样的单行解决方案。
我正在使用vue-i18n进行本地化。当我想翻译输入占位符时，如：
<input type="text" v-model="someValue" :placeholder="$t('translation.string')">
我必须使用$t()在每次重新渲染时执行的函数（也提到了库文档）。这在我的简单预订表单中添加了数千个不必要的函数调用，我想避免这种情况。
有没有办法只绑定一次属性？翻译后的值在 Vue 实例的整个生命周期中都不会改变。v-once不是我要找的，因为我想保持组件/节点的反应性，并且只对属性进行“硬编码”。
我知道我可以通过简单地将翻译后的字符串存储在数据对象中来实现我所需要的，但我想知道是否有替代的、更简单的解决方案（不需要大量的代码重复）。
我正在使用这里描述的组件插值，但在我的翻译字符串中还有一些 html 标签用于格式化。我该如何处理？
<i18n
path="description"
tag="p"
:places="{ value1, value2, routerLink }"
/>
我的 .yml 文件中的相应键如下所示：
description: Lorem ipsum <nobr><strong>{value1} %</strong></nobr> some more text <nobr><strong>{value2} %</strong></nobr> and some more text. Go to {routerLink} for more info.
我创建了一个离子应用程序并添加了 vue-i18n。
npx ionic start myapp tabs --type vue
npm install vue-i18n@next
我做了 VueI18n 设置的第一步，并将其添加到“./src/main.ts”：
import { createI18n } from 'vue-i18n';
const i18n = createI18n({
locale: 'de',
fallbackLocale: 'en',
messages: {en: {testMessage: 'Test message'}, de: {testMessage: 'Testnachricht'}}
});
在npx ionic serve浏览器控制台中收到以下警告后查看结果时：
您正在运行 vue-i18n 的 esm-bundler 构建。建议将您的捆绑器配置为使用布尔文字显式替换功能标志全局变量，以便在最终捆绑包中进行适当的摇树。
我在浏览器控制台中得到了这个信息：
您正在运行 vue-i18n 的开发版本。确保在部署生产时使用生产版本 (*.prod.js)。
当我注释掉添加到“./src/main.ts”的代码段时，两个通知都消失了。所以它们似乎真的是由 vue-i18n 引起的。
问过谷歌后，我仍然不知道如何处理这些通知。他们在告诉我什么？我应该为他们做些什么吗？我可以具体做什么？
这些是在新项目的根文件夹中自动创建的文件：
./ionic.config.json
./cypress.json
./jest.config.js
./babel.config.js
./.gitignore
./package-lock.json
./package.json
./.eslintrc.js
./tsconfig.json
./capacitor.config.json
./.browserslistrc
还请告诉我哪里需要更改。还
$ find . -type f ! -name package-lock.json …