vue中meta的用法,vue meta info
本文主要介绍了在vue vue-meta-info中动态设置meta标签的教程，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue-meta-info官方介绍vue-meta-info在编写移动项目时，meta通常被设置为禁止用户缩放。
meta name= viewport content= width=device-width，user-scalable=no，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0
在最近的需求中，单个页面允许用户缩放，因此需要为不同的页面设置不同的meta。
但是vue是单页应用，没有办法把每个页面的不同头信息设置为原生。所以我们需要求助于vue-meta-info。
vue-meta-info官方介绍
Vue-meta-info是一个基于vue 2.0的插件，它将允许你更好地管理你的应用程序中的元信息。
您可以直接在组件中设置metaInfo，它可以自动挂载到您的页面上。
如果你需要随着数据的变化自动更新你的标题，元数据和其他信息，那么这个插件是完美的。
当然，有时候我们可能会遇到比较麻烦的SEO问题，所以把这个插件和prerender-spa-plugin配合使用再合适不过了。
Vue-meta-info官方网站
vue-meta-info使用
npm安装vue-元信息-保存
main.js中的全局介绍
从“vue-meta-info”导入元信息；
vue . use(meta info)；
组件中的静态使用
模板
.
/模板
脚本
导出默认值{
元信息：{
标题：“操作手册”，
元：[
{名称：“视口”，内容：
宽度=设备宽度，用户可扩展=是，初始比例=1.0，最大比例=3.0，最小比例=1.0}
]
},
}
/脚本
需要注意的是，vue-meta-info并没有直接改变页面的元信息，而是在下面加了一个来覆盖上面，如下图：
所以只为一个页面设置，会影响其他页面。需要根据路由切换动态设置。在App.vue中收听路线变更
模板
div id=应用程序
点火电极
路由器-视图/
/保持活力
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
metaInfo() {
返回{
meta: this.metaData
}
},
data() {
返回{
元数据：[{
名称：“视口”，
内容：“宽度=设备宽度，用户可扩展=否，初始比例=1.0，最大比例=1.0，最小比例=1.0”
}]
}
},
观察：{
$路线(至，自){
if (to.name==pdf) {
this.metaData=[{
名称：“视口”，
内容：“宽度=设备宽度，用户可扩展=是，初始比例=1.0，最大比例=3.0，最小比例=1.0”
}]
}否则{
this.metaData=[{
名称：“视口”，
内容：“宽度=设备宽度，用户可扩展=否，初始比例=1.0，最大比例=1.0，最小比例=1.0”
}]
}
},
},
};
/脚本
style lang=less
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
颜色：# 2c3e50
}
/风格
如果有太多的页面需要修改，比如seo，为页面设置关键字和描述。也可以在路由器中配置，结合vuex设置更优雅。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。