I18n切换简体繁体英文设置vue项目的meta标签内容和title标题:

2024-05-19 06:50:37

思路是：两个全局变量存储meta

js 里获取i18n定义的json数据要用tc()方法

this.$i18n.tc('menu.BTitle');:获取i18n定义的json数据

head.vue的methods:

//下拉框改变简体繁体英文的时候设置metat和title

setMeta(){

// js 里获取i18n的数据要用tc()方法

let title =this.$i18n.tc('menu.BTitle');

let key =this.$i18n.tc('menu.KEYWords');

let DEs = this.$i18n.tc('menu.DEscription');

document.title=title;

let meta = this.$root.meta ; // 这里创建一个

let meta1 =this.$root.meta1;//

// 设置第一个meta的内容

meta.name = "KEYWords";

meta.content =key;

// 设置第二个meta

meta1.name = "DEscription";

meta1.content = DEs;

}

App.vue页面：一开始页面就让他有title和meta内容

mounted: function () {

let vm = this;

let head = document.getElementsByTagName('head');

let meta = document.createElement('meta'); // 这里创建一个

let meta1 = document.createElement('meta');//

let title =vm.$i18n.tc('menu.BTitle');

let key =vm.$i18n.tc('menu.KEYWords');

let DEs = vm.$i18n.tc('menu.DEscription');

document.title=title;

// 设置第一个meta的内容

meta.name = "KEYWords";

meta.content =key;

// 设置第二个meta

meta1.name = "DEscription";

meta1.content = DEs;

// 一个页面只有一个head标签，所以只有head【0】

head[0].appendChild(meta); // 把第一个meta添加给head

head[0].appendChild(meta1) // 把第二个同上

vm.$root.meta = meta;

vm.$root.meta1 = meta1；

}

main.Js定义全局变量：

new Vue({

data:function(){

return{

meta:"",

meta1:""

}

},

router,

i18n,

render: h => h(App)

}).$mount('#app')

主要：

app.vue页面mounted生命周期函数拿出全局变量用this.$root：

this.$root.meta = meta;

this.$root.meta1 = meta1;

vue项目设置meta标签内容和title标题

设置标题

document.title=title;

// 设置关键字meta的内容

meta.name = "KEYWords";

meta.content =key;

// 设置描述内容meta

meta1.name = "DEscription";

meta1.content = DEs;

I18n切换简体繁体英文设置vue项目的meta标签内容和title标题:相关推荐

win10輸入法去掉语言栏？win10輸入法切换简体繁体？
经常碰到win10輸入法打出来的字体是繁体的?或者不小心把语言栏显示出来无法回去?有根治的方法. 开始菜单-->搜索高级键盘设置,打勾使用语言栏就是有显示语言栏的,去掉就没有了. 在有显示语言栏 ...
vue 项目的I18n国际化之路
I18n (internationalization ) ---未完善产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求国际化重点: 1. 语言语言 ...
简体繁体英文国家名称切换
GO交流群:874512552, Python交流群:652376983, PHP交流群:294088839 下载地址:https://github.com/Json870422471/Json/bl ...
excel简繁切换_EXCEL中如何随意切换简体繁体文字
在Excel表里打出来的字是繁体字,要怎么改回来使用EXCEL表打出来的字全部都是繁体字,但是使用QQ对话框,或者是SOSO问问那些网页输入字体又是正常的,要怎么把繁体字改回来,申明,我没设置过什么, ...
转:win10自带输入法切换简体繁体快捷键
[CTRL+SHIFT+F] 原文地址:http://liuyanzhao.com/2811.html
win10自带输入法切换简体繁体快捷键
快捷键是[CTRL+SHIFT+F] 原文地址:http://liuyanzhao.com/2811.html
从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里
不同图表的数据获取有一定的区别在这些区别上花了不少功夫试验,把最后成功的方法做个记录,如果有类似项目要做的话,也可看看当个参考. 后端后端都大同小异,方法上没有区别,在这里以柱状图为例. sql: ...
更改vue项目的title标题
方法一:在vue.config.js中配置chainWebpack chainWebpack: config =>{config.plugin('html').tap(args => {a ...
VUE项目的e2e自动化测试超详细安装过程（保姆级）
目录一.创建测试项目二.配置Nightwatch(以chrome为演示) 一.创建测试项目首先通过@vue/cli创建一个基于nightwatch的测试项目.(我这里使用的是@vue/cli 3 ...
关于vue项目的seo问题
不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...

最新文章

热门文章