//i18n-setup.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import messages from '@/lang' // 语言包的地址，随项目本身设置修改import axios from 'axios' // 根据项目中使用api请求模块去设置，不一定是axiosVue.use(VueI18n)export const i18n = new VueI18n({ locale: 'en', // set l...
import {computed,reactive,toRefs}from"vue";//导入vue需要使用的组件import {useI18n}from"vue-i18n";//导入并使用exportdefault{ setup() {conststate =reactive({ locale :'zh'})const{t, locale} =useI18n({//方法三:传入messages对象, 里面分别是需要被安排的文字. "zh" - 中文, "en" - 英文, ...
import { useI18n } from 'vue-i18n'; setup() { const { locale } = useI18n(); // 通过locale.value切换 const changeLang = (val) =>{ locale.value = val.value; } return { changeLang } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. // 在标签中使用 通过 $t() 或者 t(...
// vue3中: import { useI18n } from 'vue-i18n'; // 解构出t方法 const { t } = useI18n(); const onclick = () => { selectOptions.push({ label: this.$t('views.Index.136758-1'), value: '' }); }; ... 7、切换语言 切换语言,需要修改如下代码中的 locale 的值 const i18n ...
setup 可通过导入 t() 来访问 template template 可通过旧版本写法即 $t() 来访问 代码如下 <template >访问方式1:{{ title }}访问方式2:{{ $t('index.title') }}</template>import { useI18n } from 'vue-i18n' export default { setup() { const...
const i18n=newVueI18n({// 创建带有选项的 VueI18n 实例locale: DEFAULT_LANG,// 语言标识,在这里默认为en,即为英文messages : locales// 语言包,上边创建的json文件})export const setup= lang =>{//切换语言的函数,lang为语言标识,en或者zh// 在此判断lang的值,如果未定义,则让lang默认为DEFAULT_LANG,...
在vue3 新增的 setup 函数中我们可以更好抽离公用代码,通过组合函数在不同的地方使用,更好的复用代码起因在日常的业务中经常会遇到处理增删改查的情况,以前只是单纯封装api地址便于管理… tolking Vue2 与 Vue3 如何创建响应式数据 Vue2 是如何创建响应式数据的? <template> <h1>{{ title }}&...
import useLocale from './hooks/useLocale' // 国际化hook const { i18n: { t }, currentLocale, //当前国际化 changeLocale, // 修改国际化 } = useLocale() // 切换语言 const switchLang = () => { if (currentLocale.value == 'zh') { changeLocale('en') } else...
我们对外提供了一个setup()的方法,给使用者修改当前使用语种的能力。同时,我们在setup里还做了三件事: 将当前语种存到 localStorage中,保存用户的使用习惯;给body添加语种相关的class,因为不同语言可能导致排版出现差异,我们需要适配;将当前语种存到Vue的全局配置中,以便未来可能的使用。
import{createApp}from'vue'importi18nfrom'./i18n'constapp=createApp(App)app.use(i18n)app.mount('#app') 至此插件就算配置好了,接下来使用的话基本上就两种场景,一是在<template>里面,一种是在setup里面 使用 1.在<template>中使用 要用到一个$t()的方法,或者使用v-t也行 ...