vue 修改页面title,vue中meta的用法
本文主要介绍vue如何使用vue meta info来设置每个页面的标题和meta信息的相关信息。本文实现的方法非常详细，对大家学习或使用vue有一定的参考价值。有需要的朋友可以参考一下。
Title: vue使用vue-meta-info设置每个页面的标题和meta信息#文章页面上的显示名称，通常是中文。
日期：2019-11-20 16:30:16 #文章生成时间一般不变。当然可以随意修改。
类别：vue #分类
标签:[vue] #文章标签，可以为空。请使用多个标签的格式。注意：后面有一个空格。
描述：vue使用vue-meta-info来设置每个页面的标题和元信息。
如需使用 vue-meta-info 配置title和meta按照以下步骤：
1.装置
npm安装vue-元信息-保存
2.main.js中介绍的
从“vue-meta-info”导入元信息
Vue.use(元信息)
3.在vue页面上配置
模板
.
/模板
脚本
导出默认值{
元信息：{
标题：“我的示例应用”，//设置标题
meta: [ //设置meta
{
名称：“关键字”，
内容：“我的示例应用程序”
},
{
名称：描述，
内容：“这是网页的描述”
}
]
链接：[{ //设置链接
rel:“asstes”，
href: https://assets-cdn . github . com/
}]
}
}
/脚本
如果你的标题或者元数据是异步加载的，你可能需要像这样使用它。
模板
.
/模板
脚本
导出默认值{
名称：“异步”，
metaInfo () {
返回{
标题：this.pageName
}
},
data () {
返回{
pageName:“正在加载”
}
},
已安装(){
setTimeout(()={
this.pageName=async
}, 2000)
}
}
/脚本
如果您使用了Vue SSR 来渲染页面，那么您需要注意的是：
因为没有动态更新，所以在所有的生命周期钩子函数中，只有beforeCreate和created会在服务器端渲染(SSR)时被调用。也就是说，任何其他生命周期钩子函数中的代码(比如beforeMount或者mounted)都只会在客户端执行。另外需要注意的是，应该避免在beforeCreate和created的生命周期内产生全局副作用的代码，比如用setInterval设置timer。仅在客户端的代码中，我们可以设置一个计时器，然后在beforeDestroy或destroyed的生命周期中销毁它。但是，因为在SSR期间不会调用destroy hook函数，所以计时器将永远保留。要避免这种情况，请将副作用代码移到“安装前”或“已安装”生命周期。
基于上述约束，我们目前可以使用静态数据来呈现我们的元信息。下面是一个使用示例：
模板
.
/模板
脚本
导出默认值{
元信息：{
标题：“我的示例应用”，//设置标题
meta: [{ //设置meta
名称：“关键字”，
内容：“我的示例应用程序”
}]
链接：[{ //设置链接
rel:“asstes”，
href: https://assets-cdn . github . com/
}]
}
}
/脚本
此时，vueMetaInfo将帮助我们在ssr的上下文中挂载一个title变量和一个render对象。大概是这样的：
上下文={
.
标题：“我的示例应用程序”，
渲染：{
元：函数(){.},
link: function () {.}
}
}
此时，我们可以转换我们的模板：
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题{ { title } }/标题
{{{render.meta render.meta()}}}
{{{render.link render.link()}}}
/头
身体
！-vue-SSR-插座-
/body
/html
这样，就可以呈现所需的数据。值得注意的是，虽然我们可以使用
模板
.
/模板
脚本
导出默认值{
名称：“异步”，
metaInfo () {
返回{
标题：this.pageName
}
},
data () {
返回{
pageName:“正在加载”
}
},
已安装(){
setTimeout(()={
this.pageName=async
}, 2000)
}
}
/脚本
注意：
这个表单定义了数据，但是最终呈现的标题仍然在加载，因为服务器端呈现除了created和beforeCreate之外没有挂载的钩子。
总结
这就是这篇关于vue通过vue meta info设置每个页面的标题和meta信息的文章。更多关于vue设置页面的标题和元信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。