vue 每一个页面设置 网页标题 描述和关键词(SEO设置)

最近项目中用到了seo相关的东西,搞了好久,这是一个最适合的版本,不要做过多的设置直接放到路由中就可以使用

第一步 在router里边的index.js文件中

 这是他的格式

第二步 在全局路由配置,去设置网页标题 关键词和描述的内容

if (to.meta.content) {
        const head = document.getElementsByTagName('head')[0];
        // 删除现有名称为 "keywords" 和 "description" 的 meta 标签
        const existingKeywordsMeta = document.querySelector('meta[name="keywords"]');
        if (existingKeywordsMeta) {
            existingKeywordsMeta.remove(); // 移除现有的关键词 meta 标签
        }
        const existingDescriptionMeta = document.querySelector('meta[name="description"]');
        if (existingDescriptionMeta) {
            existingDescriptionMeta.remove(); // 移除现有的描述 meta 标签
        }

        // 创建并设置新的关键词和描述 meta 标签
        const keywordsMeta = document.createElement('meta');
        keywordsMeta.setAttribute('name', 'keywords');
        keywordsMeta.setAttribute('content', to.meta.content.keywords);
        head.appendChild(keywordsMeta); // 添加新的关键词 meta 标签

        const descriptionMeta = document.createElement('meta');
        descriptionMeta.setAttribute('name', 'description');
        descriptionMeta.setAttribute('content', to.meta.content.description);
        head.appendChild(descriptionMeta); // 添加新的描述 meta 标签

        // 可选：如果需要，更新名为 "content" 的其他 meta 标签
        const contentMeta = document.querySelector('meta[name="content"]');
        if (contentMeta) {
            contentMeta.setAttribute('content', to.meta.content); // 更新 content 属性
        }
    }

直接复制就可以使用,无需做其他配置.