热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了vue动态给每个页面添加title、关键词和描述的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

前言:直接写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、关键词和描述内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


推荐阅读
  • 本文介绍了Java语言开发的远程教学系统,包括源代码、MySQL数据库配置以及相关文档,适用于计算机专业的毕业设计。系统支持远程调试,采用B/S架构,适合现代教育需求。 ... [详细]
  • 本次CSPS模拟测试中,面对算法挑战,作者经历了一次心态与技术的双重考验。通过不断尝试与调整,最终克服了遇到的难题。 ... [详细]
  • 在一些特殊的报表中我们加入了图表元素,可是分类轴与系列值普通情况下都是固定的.那么,有没有什么方法能够依据情况变更分类轴与系列值?方法例如以下:所用报表开发工具:FineRepor ... [详细]
  • 在与客户的互动中,我们经常被问及BI系统是否提供了特定行业的解决方案。实际上,作为数据分析工具,BI系统的通用性远大于其行业针对性。本文将探讨BI系统的通用性和行业适应性。 ... [详细]
  • 无论是初学者还是经验丰富的开发者,W3CSchool都是一个不可或缺的资源库。本文将介绍几个关键的学习资源,帮助您提升网页开发技能。 ... [详细]
  • 本文探讨了如何利用 Hibernate 进行高效的批量更新和删除操作,包括直接使用 Hibernate API 的方法及其局限性,以及如何通过 JDBC 或存储过程实现更优的性能。 ... [详细]
  • 深入理解Python中的sorted高阶函数
    排序是编程中常见的需求,无论是简单的数字排序还是复杂的对象排序,其核心都是比较两个元素。本文将探讨如何利用Python的高阶函数`sorted()`,通过自定义键函数来实现灵活多样的排序逻辑。 ... [详细]
  • 探索Squid反向代理中的远程代码执行漏洞
    本文深入探讨了在网站渗透测试过程中发现的Squid反向代理系统中存在的远程代码执行漏洞,旨在帮助网站管理者和开发者了解此类漏洞的危害及防范措施。 ... [详细]
  • NameNode内存优化基于缓存相同文件名的方法
    NameNode内存优化基于缓存相同文件名的方法Namenodeheapoptimizationreuseobjectsforcommonlyuse ... [详细]
  • poweroff命令用于安全地关闭计算机的操作系统,并最终切断电源。当确保所有用户已退出系统且所有数据均已妥善保存后,可通过此命令立即执行关机操作。 ... [详细]
  • 1.2 行筛选技巧
    面对一张数据表时,若需仅查看符合特定条件的数据行,了解如何高效地进行行筛选至关重要。本文将介绍利用常见的逻辑运算符及组合条件实现精准筛选的方法。 ... [详细]
  • Android商城应用开发指南(第二部分):创建启动欢迎页
    大多数商城应用程序在启动时会显示一个欢迎页面,以提升用户体验。本文将指导您如何实现一个基本的欢迎页,该页面会在用户打开应用后短暂展示,随后自动跳转至主界面。 ... [详细]
  • 1.增加视图函数#Http:127.0.0.1booksdefshow_books(request):booksBookInfo.objects.all()returnrend ... [详细]
  • 一位女子向诸位神灵提问,探讨命运、爱情、正义等话题,揭示了人性和社会的多重面向。 ... [详细]
  • 本文总结了MySQL的一些实用技巧,包括查询版本、修改字段属性、添加自动增长字段、备份与恢复数据库等操作,并提供了一些常见的SQL语句示例。 ... [详细]
author-avatar
高远PASTOR
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有