npm install vue-i18n
单独文件夹
index.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import Chinesefont from './language/Chinese.character'
import English from './language/English'
Vue.use(VueI18n)
const i18n =new VueI18n({
silentTranslationWarn: true,
locale: sessionStorage.getItem('boslanguage')||'zh-TW',
messages: {
'zh-TW': Chinesefont,
'en': English
}
});
export default i18n
语言文件
Chinese.character.js
module.exports = {
Login:{
Systemlogin:'系統登錄'
}
}
main.js文件
import i18n from './common/i18n/index';
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
语言在选择里写要刷新
watch:{
languageSelect(newValue,oldValue){
this.$i18n.locale = newValue
this.$router.go(0);
}
},
组件用法
{{$t('Login.Systemlogin')}}
在data中用法
//不会响应式
// rules2: {
// account: [
// { required: true, message:this.$t('Login.Systemlogin'), trigger: "blur" },
// ],
// checkPass: [
// { required: true, message: "请输入密码", trigger: "blur" },
// ],
// },
在computed中写会有响应式 如果下面要用到要在data中不能写
data(){
return{
ruyles2:{} //不能写
}
}
computed:{
rules2:function(){
return {
account: [
{ required: true, message:this.$t('Login.username'), trigger: "blur" },
],
checkPass: [
{ required: true, message:this.$t('Login.password'), trigger: "blur" },
],
}
}
}
在路由中写法1 router.js
import i18n from './common/i18n/index';
{
path: '/',
component: Home,
redirect:'/userlist',
pathName:'userlist',
name:i18n.messages[i18n.locale].Login.Systemlogin,
//name:i18nlang.$t('Login.Systemlogin'),
}
在路由中写法2router.js
import i18n from './common/i18n/index'
import Vue from 'vue'
var i18nlang = new Vue({i18n})
{
path: '/',
component: Home,
redirect:'/userlist',
pathName:'userlist',
//name:i18n.messages[i18n.locale].Login.Systemlogin,
name:i18nlang.$t('Login.Systemlogin'),
}
vue 多语言i18n 在data中在路由中写法
最新推荐文章于 2024-05-07 15:12:59 发布