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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
Angular表单验证实例详解
Oct 20 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
js 闭包深入理解与实例分析
Mar 19 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
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
js实现简单进度条效果
2020/03/25 Javascript
python中文乱码的解决方法
2013/11/04 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python实现马丁策略的实例详解
2021/01/15 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
委托书样本
2014/04/02 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书