vue+vue-meta-info动态设置meta标签教程

 更新时间:2022年04月19日 10:12:16   作者:Yàο耀耀  
这篇文章主要介绍了vue+vue-meta-info动态设置meta标签教程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

在写移动端项目的时候,通常都会设置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的插件,它会让你更好的管理你的 app 里面的 meta 信息。

你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。

如果你需要随着数据的变化,自动更新你的title、meta等信息,那么用此 插件也是再合适不过了。

当然,有时候我们也可能会遇到让人头疼的SEO问题,那么使用此插件配合 prerender-spa-plugin 也是再合适不过了

vue-meta-info官网

vue-meta-info使用

npm install vue-meta-info --save

在main.js中全局引入

import MetaInfo from 'vue-meta-info';
Vue.use(MetaInfo);

在组件内静态使用

<template>
  ...
</template>
 
<script>
  export default {
     metaInfo: {
      title: '操作手册',
       meta: [
      { name:'viewport', content:
      'width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'}
    ]
    },
  }
</script> 

需要注意的是:vue-meta-info并不是直接改变页面的meta信息,而是在下面追加一条覆盖上面的,如下图:

所以只为某一个页面设置了,会影响别的页面的。就需要根据路由切换来动态设置了。在App.vue中监听路由变化

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
  export default {
    name: "App",
    metaInfo() {
      return {
        meta: this.metaData
      }
    },
    data() {
      return {
        metaData: [{
          name: 'viewport',
          content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
        }]
      }
    },
    watch: {
      $route(to, from) {
        if (to.name == 'pdf') {
          this.metaData = [{
            name: 'viewport',
            content: 'width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0'
          }]
        } else {
          this.metaData = [{
            name: 'viewport',
            content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
          }]
        }
      },
    },
  };
</script>
<style lang='less'>
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }
</style>

如果需要改动的页面太多,比如要做seo,给页面设置keywords和description的。也可以在router中配置,结合vuex去设置更加优雅一点把。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE组件中的 Drawer 抽屉实现代码

    VUE组件中的 Drawer 抽屉实现代码

    这篇文章主要介绍了VUE组件 之 Drawer 抽屉 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 5个实用的Vue技巧分享

    5个实用的Vue技巧分享

    在这篇文章中,我们将探讨五个实用的 Vue 技巧,这些技巧可以使你日常使用 Vue 编程更高效、更富有成效,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • 详解vue-cli下ESlint 配置说明

    详解vue-cli下ESlint 配置说明

    这篇文章主要介绍了详解vue-cli下ESlint 配置说明,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详解如何使用 vue-cli 开发多页应用

    详解如何使用 vue-cli 开发多页应用

    本篇文章主要介绍了详解如何使用 vue-cli 开发多页应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • axios取消请求与避免重复请求

    axios取消请求与避免重复请求

    在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响,这篇文章主要给大家介绍了关于axios取消请求与避免重复请求的相关资料,需要的朋友可以参考下
    2021-06-06
  • ElementUI el-table 树形数据的懒加载的实现

    ElementUI el-table 树形数据的懒加载的实现

    当面对大量数据时,一次性加载所有数据可能会导致性能问题,我们可以实现树形数据的懒加载,本文主要介绍了ElementUI el-table 树形数据的懒加载,感兴趣的可以了解一下
    2024-06-06
  • vue-router4版本第一次打开界面不匹配路由问题解决

    vue-router4版本第一次打开界面不匹配路由问题解决

    本文主要介绍了vue-router4版本第一次打开界面不匹配路由问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue3项目的3种创建方式代码示例

    Vue3项目的3种创建方式代码示例

    使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目,正好记录一下,这篇文章主要给大家介绍了关于Vue3项目的3种创建方式,需要的朋友可以参考下
    2024-03-03
  • 详解vue mint-ui源码解析之loadmore组件

    详解vue mint-ui源码解析之loadmore组件

    本篇文章主要介绍了vue mint-ui源码解析之loadmore组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 使用watch监听路由变化和watch监听对象的实例

    使用watch监听路由变化和watch监听对象的实例

    下面小编就为大家分享一篇使用watch监听路由变化和watch监听对象的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论