快捷導航

vue+vue-meta-info動態(tài)設(shè)置meta標簽教程

更新時間：2022年04月19日 10:12:16 作者：Yàο耀耀

這篇文章主要介紹了vue+vue-meta-info動態(tài)設(shè)置meta標簽教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue-meta-info官方介紹

vue-meta-info 是一個基于vue 2.0的插件，它會讓你更好的管理你的 app 里面的 meta 信息。

你可以直接在組件內(nèi)設(shè)置 metaInfo 便可以自動掛載到你的頁面中。

如果你需要隨著數(shù)據(jù)的變化，自動更新你的title、meta等信息，那么用此插件也是再合適不過了。

當然，有時候我們也可能會遇到讓人頭疼的SEO問題，那么使用此插件配合 prerender-spa-plugin 也是再合適不過了

vue-meta-info官網(wǎng)

vue-meta-info使用

npm install vue-meta-info --save

在main.js中全局引入

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

在組件內(nèi)靜態(tài)使用

<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信息，而是在下面追加一條覆蓋上面的，如下圖：

所以只為某一個頁面設(shè)置了，會影響別的頁面的。就需要根據(jù)路由切換來動態(tài)設(shè)置了。在App.vue中監(jiān)聽路由變化

<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,給頁面設(shè)置keywords和description的。也可以在router中配置，結(jié)合vuex去設(shè)置更加優(yōu)雅一點把。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: