vue 动态给每个页面添加title、关键词和描述的方法


Posted in Javascript onAugust 28, 2020

前言:直接写html加title和关键词想必大家都知道怎么去加,但用vue框架开发的项目我们怎么去动态的给每个页面添加呢 ↓

先在router.js里面配置我们的title、关键词和描述

{
		path: '/train',
		name: 'Train',
		component: () => import('../components/page/Train.vue'),
		meta: {
			title: '教师培训-恩启官网',
			content: {
				keywords: '教师培训、恩启培训、恩启云课堂、特教老师、线上服务、徐紫薇、王学钢',
				description: '恩启教师培训专注于自闭症行业教师专业技能提升培训,评估师培训。为自闭症康复教师提供科学、系统的在线课程、咨询服务。'
			}
		}
	},

 在main.js里用beforeEach(前置守卫)判断

router.beforeEach((to, from, next) => {
	if (to.meta.content) {
		let head = document.getElementsByTagName('head');
		let 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.content;
		head[0].appendChild(meta)
	}
	if (to.meta.title) {
		document.title = to.meta.title;
	}
	next()
});

这样就行了。

后续补充:vue的特点呢就是组件系统跟数据驱动,嗯,是特别方便的,比如我们一个组件里根据路由状态值判断初始化加载不同的页面(比如在前一个页面有三个按钮:北京、上海、深圳)点击进去不同的城市页面,但我们的页面都是用的同一个组件,如下路由配置:↓

{
		path: '/cityDetail',
		name: 'CityDetail',
		component: () => import('../components/page/CityDetail.vue'),
		meta: {
			title: '',
			content: {
				keywords: '',
				description: ''
			}
		}
	},

这里我们再router.js里没进行关键词的填写,因为他有好几个不同城市加载,我们可以在对应的组件里加个判断

if(orgUrl == 'beijing'){
 document.querySelector('meta[name="keywords"]').setAttribute('content', '北京教研中心,恩启教研中心,IEDA教研中心')
 document.querySelector('meta[name="description"]').setAttribute('content', '恩启诞生于2014年 ,是一家专业的自闭症康复机构。北京教研中心,位于北京市朝阳区孙河地铁站对面弘园五号创意生活园A5,联系方式13021253543,北京教研中心。')
 document.title = '恩启IDEA·北京教研中心-直营连锁-恩启官网';
}else if(orgUrl == 'shanghai'){
	 document.querySelector('meta[name="keywords"]').setAttribute('content','上海静安教研中心,恩启教研中心,IEDA教研中心');
  document.querySelector('meta[name="description"]').setAttribute('content', '恩启IDEA静安中心坐落于上海市大宁中心广场,毗邻大宁音乐中心,交通便利,生活便捷。');
  document.title='恩启IDEA·上海静安教研中心-直营连锁-恩启官网';
}

这样设置就ok了;

总结

到此这篇关于vue 动态给每个页面添加title、关键词和描述的方法的文章就介绍到这了,更多相关vue 添加title、关键词和描述内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery UI 实现email输入提示实例
Aug 15 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
js实现登录验证码
Dec 22 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 #Javascript
vue select 获取value和lable操作
Aug 28 #Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 #Javascript
js实现弹幕飞机效果
Aug 27 #Javascript
jQuery编写QQ简易聊天框
Aug 27 #jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
js实现前端界面导航栏下拉列表
Aug 27 #Javascript
You might like
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP实现八皇后算法
2019/05/06 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
全面理解闭包机制
2016/07/11 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
vue环形进度条组件实例应用
2018/10/10 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
pip命令无法使用的解决方法
2018/06/12 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python实现经纬度采样的示例代码
2020/12/10 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
煤矿安全承诺书
2014/05/22 职场文书
促销活动总结怎么写
2014/06/25 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技