vue 多语言i18n 在data中在路由中写法

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'),
 }

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
回答: 总体来说,在使用 Vue Router 方面,Vue 2 和 Vue 3 的写法类似,但是在具体细节上还是有所差异。在 Vue 2 ,通常使用 Vue Router 作为路由库;而在 Vue 3 Vue Router 仍然是官方推荐的路由库,但也可以选择使用新的路由库 - Vue Router Next。如果需要更深入地了解 Vue Router 的使用方法和技巧,建议参考官方文档或相关教程。\[1\]\[2\] 另外,Vue 2 和 Vue 3 在编写组件的方式上也有一些区别。在 Vue 2 ,通常使用选项式 API 的写法,即在一个对象定义 data、methods、computed 等选项。而在 Vue 3 ,可以使用 Composition API,它提供了一种更灵活和可组合的方式来编写组件。在 Composition API ,可以使用 setup 函数来定义组件的数据、方法和生命周期钩子等。\[3\] #### 引用[.reference_title] - *1* *2* [vue2和vue3路由的区别和写法?](https://blog.csdn.net/XU441520/article/details/129525102)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue2和vue3不同写法及区别](https://blog.csdn.net/qq_59599812/article/details/129887018)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值