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动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换
引用地址:vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换 - 长空雁叫霜晨月 - 博客园项目预览地址:https://volodya-01.github.io/vue2.0_t ...
给动态生成的id标签添加html,vue动态渲染svg、添加点击事件
欢迎关注[前端小讴的github],原创技术文章业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签经多次实验,用em ...
vue动态路由变化页面不重新加载问题，实现方式比较简单，就是有点鸡贼
由于使用了动态路由,有时候页面需根据路由来动态变化,整个页面需要重新加载,但是地址指向同一个,这边用了一个比较取巧的方式将整个页面封装成一个子组件 children => formTe,参数可 ...
vue 动态的设置页面的高和宽，适配浏览器的缩放比
1 获取网页的缩放比 export default {components: { leftview, betweenview, rightview },data() {return {ratio:10 ...
vue动态设置公众号的title
新方法路由文件 router.beforeEach((to, from, next) => {//修改标题if (to.meta.title) {document.title = to.met ...
如何在WordPress中添加SEO关键词和元描述
您是否想要在WordPress中正确添加SEO关键词(Meta Keywords)和元描述(Meta Description)? 元关键词和描述使您可以提高网站的SEO排名.这意味着您的业务会有更多的 ...
educoder头歌Web实训 web课——综合应用案例：动态焦点图页面的制作
educoder头歌Web实训太原理工web课--综合应用案例:拼图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:动态焦点图页面的样式设计任务描述本关任务: 完成动态焦点图 ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
超详细！！vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript
vue.vue-cli脚手架项目使用prerender-spa-plugin,解决SEO并为其添加title,keyWords,descript 注意注意注意:本文章所有例举内容,页面均为纯静态页 ...

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

vue 动态给每个页面添加title、关键词和描述相关推荐

最新文章

热门文章