Vue路由页面：无需vue-meta，如何在脚本中设置模板内的meta标签

首先要纠正一个问题：你的组件模板里直接写<head>是无效的——Vue组件的模板会渲染到页面的<body>内部的挂载节点中，这里的<head>不会被浏览器识别为页面的头部元数据，基础的Meta标签应该放在项目根目录的public/index.html的<head>里。

接下来是具体实现步骤：

1. 在public/index.html中配置基础Meta标签 #

先在全局的HTML文件里定义好需要的Meta标签，作为默认值：

<head>
  <meta charset="UTF-8">
  <meta name="description" content="站点默认描述">
  <meta name="keywords" content="站点默认关键词">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>默认站点标题</title>
</head>

2. 在页面组件中通过原生DOM操作修改Meta标签 #

在每个路由页面的组件里，利用created或mounted钩子，直接操作document.head里的元素来修改对应Meta的content属性：

<template>
  <!-- 组件的页面内容，不需要写head -->
  <div class="slider-page">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  name: "Slider",
  created() {
    // 设置页面标题
    document.title = "Slider轮播页 | 我的站点";

    // 修改description标签
    const descMeta = document.head.querySelector('meta[name="description"]');
    if (descMeta) {
      descMeta.content = "这是一个Vue实现的轮播组件页面，支持自定义轮播内容";
    }

    // 修改keywords标签
    const keywordsMeta = document.head.querySelector('meta[name="keywords"]');
    if (keywordsMeta) {
      keywordsMeta.content = "Vue轮播, Slider组件, 移动端轮播";
    }

    // 特殊页面需要修改viewport的话也可以操作（一般不需要）
    const viewportMeta = document.head.querySelector('meta[name="viewport"]');
    if (viewportMeta) {
      viewportMeta.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0";
    }
  },
  // 可选：页面卸载时恢复默认值，避免影响其他页面
  beforeUnmount() {
    document.title = "我的站点";
    
    const descMeta = document.head.querySelector('meta[name="description"]');
    if (descMeta) {
      descMeta.content = "站点默认描述";
    }

    const keywordsMeta = document.head.querySelector('meta[name="keywords"]');
    if (keywordsMeta) {
      keywordsMeta.content = "站点默认关键词";
    }
  }
};
</script>

3. 处理Meta标签不存在的情况 #

如果index.html里没有定义某个Meta标签，可以在组件中动态创建并添加到<head>：

// 动态创建并设置description标签
let descMeta = document.head.querySelector('meta[name="description"]');
if (!descMeta) {
  descMeta = document.createElement('meta');
  descMeta.name = 'description';
  document.head.appendChild(descMeta);
}
descMeta.content = "Slider页面的专属描述";

内容的提问来源于stack exchange，提问作者Epimetheus14