Nuxt：动态修改head

页面head标签是较为重要的一个模块，本文主要分享两种设置head标签的方式，例如添加Meta，修改Meta，添加script等。

1. 使用nuxt.config.js配置head，官方文档

使用nuxt.config.js配置meta

export default {

head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
}

使用nuxt.config.js配置script

export default {

head: {
    script: [
      {

        src: "你要引用的资源url",

      },

      {

        type: "text/javascript",

        innerHTML:"你的代码",

      },

    ],
    __dangerouslyDisableSanitizers: ["script"],//插入的代码时，必须要加上这行，否则你代码将会被转义
}

切记，在head的script中插入代码时，记得加上__dangerouslyDisableSanitizers: ["script"],，否则其中的空格、换行符等会被转义，导致页面无法执行代码。

2. 在vue组件中修改或添加meta、title。script

export default Vue.extend({

  name: "EnIndex",
  
  head() {
    return {
      title: "123",
      htmlAttrs: {
        lang: "en-uk",
      },
      meta: [
        {
          hid: "description",
          name: "description",
          content: "",
        },
        {
          hid: "keywords",
          name: "keywords",
          content:"",
        },
      ],
    };
  },
});

hid 键为meta标签配一个唯一的标识编号。当需要动态添加meta的时候，有需要覆盖原先的meta的情况，就需要使用hid 键标识，若无hid 键标识，会出现多个重复name的meta。

添加script也是同上。