Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue meta设置页面

vue meta设置页面

作者头像
py3study
发布于 2021-03-23 13:08:21
发布于 2021-03-23 13:08:21
3.4K00
代码可运行
举报
文章被收录于专栏:python3python3
运行总次数:0
代码可运行

一、概述

在项目中,有一个搜索页面,需要根据不同的关键字,动态修改meta信息,用于seo优化。

本文接下来介绍如何使用 vue-meta 修改页面头部信息

二、vue-meta使用

安装

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install --save vue-meta

main.js使用依赖

修改main.js,增加2行代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 使用 vue-meta
import Meta from "vue-meta";
Vue.use(Meta);

固定的meta

test.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div class="container">123</div>
</template>

<script>
    export default {
      name: "test",
      data() {
        return {};
      },
      metaInfo: {
        title: "页面标题",
        meta: [
          { name: "keywords", content: "页面关键字" },
          { name: "description", content: "页面描述" },
        ],
      },
    }
</script>

<style scoped>

</style>

设置好路由之后,访问页面,查看head部分

可以发现,对应的值,已经修改了。 

动态的meta

根据请求数据,设置meta

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div class="container">123</div>
</template>

<script>
    export default {
      name: "test",
      data() {
        return {
          setting: {
            title: "",
            keywords: "",
            description: "",
          },
        };
      },
      metaInfo() {
        return {
          title: this.setting.title,
          meta: [
            { name: "keywords", content: this.setting.keywords },
            { name: "description", content: this.setting.description },
          ],
        };
      },
      mounted() {
        this.Init()
      },
      methods: {
        Init(){
          // 模拟接口获取数据
          this.setting.title = "页面标题1";
          this.setting.keywords = "页面关键字1";
          this.setting.description = "页面描述1";
        }
      }
    }
</script>

<style scoped>

</style>

设置好路由之后,访问页面,查看head部分

本文参考链接:

https://www.freesion.com/article/18001091411/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/03/22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + Mo
今日推荐:机器学习模型从理论到实战|【007-K均值聚类(K-Means)】新闻主题分类
中杯可乐多加冰
2024/12/03
2380
Vue组件基础知识点
组件化开发指的是根据封装的思想,把页面上可重用的UI结构封装为组件,从而方便项目的开发和维护。
害恶细君
2022/11/22
3930
Vue组件基础知识点
陌溪在百度上搜索蘑菇博客,被吓了一跳
最近,有很多小伙伴反馈,说在部署蘑菇博客后,发现没有办法修改网站的 meta 信息,也就是浏览器上的 icon图标和标题信息,没有办法自定义。
陌溪
2021/12/08
6690
陌溪在百度上搜索蘑菇博客,被吓了一跳
浅学Vue3
NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。2020年3月17日,Github宣布收购npm,GitHub现在已经保证npm将永远免费。
QGS
2024/01/14
3680
使用vue构建企业级应用步骤
在main.js中导入babel-polyfill 以便旧版浏览器中可以使用新的js特性
lilugirl
2019/12/16
7600
Vue.js项目中管理每个页面的头部标签的方法
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title,我们只能去修改index.html模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法。
张张
2019/12/27
1.8K0
手把手教你写一个Vue组件发布到npm且可外链引入使用
前言 我们为什么要写个组件上传到npm镜像上呢,我们肯定遇到过这样一个场景,项目中有很多地方与某个功能相似,你想到的肯定是把该功能封装成Component组件,后续方便我们调用。但是过了一段时间,你
Sneaker-前端公虾米
2021/06/21
4770
手把手教你写一个Vue组件发布到npm且可外链引入使用
网站SEO优化:Meta标签如何书写?Vue项目怎么优化Meta标签?
什么是Meta标签呢?这可不是最近很火的“元宇宙”或是FB。Meta标签,或者说Meta元素,是HTML内head标签的一部分。通常用于指定页面描述、关键字以及未在其他head元素、属性中提供的其他元数据。间接参与浏览器页面渲染,或者为搜索引擎的爬虫提供引导(进而让搜索引擎更好收录网站)。
Mintimate
2022/01/20
4.3K5
网站SEO优化:Meta标签如何书写?Vue项目怎么优化Meta标签?
vue的seo问题
参考 https://www.npmjs.com/package/prerender-spa-plugin https://www.npmjs.com/package/vue-meta-info
似水的流年
2020/04/27
5640
42·灵魂前端工程师养成-前端框架Vue初识
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/11/08
2790
42·灵魂前端工程师养成-前端框架Vue初识
vue项目实战:实战技巧总结
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
微芒不朽
2022/04/28
3.5K0
Vue路由以及SEO配置
hash模式对应的路由是类似于这个样子的 http://localhost:8080/#/about
码客说
2019/10/22
1.5K0
Electron + Vue跨平台桌面应用开发实战教程(三)
我们从截图里可以看到,右侧区域主要是由标题栏和内容编辑区组成,其中标题栏的右侧还包含了一排操作按钮,在这里我们就先把这一排按钮忽略了,先把主要功能开发完毕再考虑迭代优化。
Javanx
2020/08/19
1.5K0
Electron + Vue跨平台桌面应用开发实战教程(三)
vue 实现百度下拉提示搜索功能
get方法实现获取下拉数据和搜索功能,输入keyword之后,调用get方法使用jsonp获取提示数据,然后赋值给myData,然后使用v-for遍历提示数据
py3study
2021/04/07
1.7K0
vue 实现百度下拉提示搜索功能
Vue学习笔记(二)
单页面应用程序 SPA,指的是一个 Web 网站中只有唯一一个 HTML 页面,所有的功能和交互都在这个唯一的页面内完成。
赤蓝紫
2023/01/01
2.4K0
Vue学习笔记(二)
Vue组件基础(上)
单页面应用程序(英文名:Single Page Application)简称SPA,顾名思义,指的是一个web网站中只有唯一的一个HTML页面,所有的功能和交互都是在这唯一的一个页面内完成。
岳泽以
2022/10/26
8230
Vue组件基础(上)
Vue学习-Vue router
在配置Vue-router时有两种模式,分别为:hash模式(默认)、history模式。
花猪
2022/02/17
4.6K0
Vue学习-Vue router
Vue实现的github搜索小案例
效果 ​ ​ 前置知识 vue基础 axios es6基础语法 代码 ​ index.html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <!-- 针对IE浏览器的一个特殊配置,含义是让IE浏览器以最高的渲染级别渲染页面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- 开启移动端的理想视
henu_Newxc03
2021/12/26
2650
Vue 组件化开发
  将实现页面某一部分功能的结构、样式和逻辑封装成为一个整体,使其高内聚,低耦合,达到分治与复用的目的。在前端范畴,我们可以用下面的这张图来简单地理解组件化:
Demo_Null
2020/09/28
1.8K0
Vue 组件化开发
vuejs之结合使用vue+element-ui搭建后台管理页面
进入到该项目目录,输入:npm install --save element-ui
西西嘛呦
2020/08/26
1.2K0
推荐阅读
相关推荐
【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + Mo
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验