Vue项目中如何设置动态的TDK
TDK是什么
TDK就是网站的标题(title)、描述(description)和关键词(keyword)
TDK在哪里
上面大佬对TDK的概念解释的很全面,但是在网页中的TDK在哪里呢,作为开发人员打开F12我们就可以看到
可以看到T就是我们页签中的标题,而description和keyword也是可以存在的但是并没有给用户直接展示的形式
设置网站TDK
在html中我们可以如下设置我们的网站TDK
设置后效果如下
Vue中动态设置TDK
1. 修改index.html
将TDK的内容清空,然后看到官方提到了位置的问题,meta标签必须写在头部head标签之内,而keywords的meta标签要写在title的meta标签之后,但又在description的meta标签之前,像下面这样的顺序写:
2. 来到路由配置中添加meta属性
meta: {title: '首页',content: {keywords: '关键字1,关键字2',description: '描述内容描述内容描述内容描述内容描述内容描述内容描述内容'}}
3. 找到Vue项目中的导航守卫
根据自己项目中导航守卫设置的位置,此处为了方便我就直接设置在了route.js中了
router.beforeEach((to, from, next) => {// 路由发生变化改变description和keywordif (to.meta.content) {const head = document.getElementsByTagName('head')const meta = document.createElement('meta')document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)meta.content = to.meta.contenthead[0].appendChild(meta)}// 路由发生变化修改页面titleif (to.meta.title) {document.title = to.meta.title}next()
})
4. 重启项目即可
npm run dev
Vue项目中如何设置动态的TDK相关推荐
- VUE项目中CSS设置动态宽度的方法
网上找到三种方法: 一.使用cumputed 首先你务必看Vue的官方文档.涉及到的基础知识有: 绑定内联样式的使用 computed的使用 文档写的都是基础使用.那么在项目实战中如何使用,两步就能实 ...
- vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...
- vue项目中运用webpack动态配置打包多种环境域名
在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-e ...
- vue项目中使用Echarts 动态更改图表数据 , Vue 折线图、柱状图等图表动态刷新 ,
问题:在vue组件中,用echarts插件 动态获取.修改图表数据 解决:已解决! 第一步:打开cmd命令窗口 安装echarts依赖 安装:npm install echarts -S 第二步:在m ...
- Vue项目中常见问题(23)动态展示Floor组件
目录 gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 1.查看数据对应的位置 2.为什么这 ...
- vue项目中,设置页面局部loading加载效果(element)
直接引用element的loading,默认的是全屏loading,实际中有很多地方不需要全屏loading,只需要某部分loading,如上图 话不多说,直接上代码 封装好的loading.js i ...
- 【vue】在vue项目中按顺序动态24个英文字母选项:A B C D E F......
效果展示: 点击增加选项和答案后,会按顺序新增24位的英文字母: <!-- html --> <el-button type="danger" size=&quo ...
- Vue项目中Table设置 render 函数
statusList1: {0: "",1: "",2: "药品服务费收入",3: "特药服务费收入",4: " ...
- 怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
最新文章
- python读取excel-Python Pandas读取修改excel操作攻略
- DAY2-python基础1
- StoryBoard概览
- typedef struct和struct区别
- vue echart甘特图
- docker网络、bridge、host
- USB加密狗复制USBTrace数据截取工具分享
- 【Jsp】第七课 Jsp内置对象的学习和使用
- Virtual Serial Port Driver Pro 9.0.270.0英文版虚拟串口补丁
- ONL/Debian 和 Ubuntu 版本的对应关系
- 微信第三方平台代小程序实现业务
- 靶场练习第十四天~vulnhub靶场之dc-6
- 基于can总线的A2L文件解析(1)
- 7-31 求圆周长和面积
- 干货|机器学习-稀疏矩阵的处理
- 【热搜】想卷深度学习必会的10题【最全AI面经】
- 最新图文识别技术综述
- vue3运行npm run serve无反应,选择跳转后会自动跳入文件路径中
- 洛谷 P4544 [USACO10NOV]Buying Feed G)(单调队列优化DP)
- 明星+大制作+生硬广告植入 观众看《富春山居图》-评论频道-金融界
热门文章
- 街头抓拍之一:酷似福克纳的老头
- python 对象的异或运算符_python的运算符
- python图像处理opencv_使用Python+OpenCV进行图像处理(二)| 视觉入门
- java 什么时候依赖注入_玩框架java依赖注入 – 何时使用单例
- dateformat 返回类型_SpringBoot返回date日期格式化
- imp oracle full,Oracle 10g imp 之 full database (转官档)
- C#代码总结02---使用泛型来获取Asp前台页面全部控件,并进行属性修改
- 实验 4 [bx]和 loop 的使用
- 洛谷 P1136 迎接仪式 解题报告
- Linux 系统的启动顺序