vue中动态设置meta标签和title标签的方法


Posted in Javascript onJuly 11, 2018

因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容

//router内的设置
{
   path: '/teachers',
   name: 'TDetail',
   component: TDetail,
   meta: {
    title:"教师详情",
    content: 'disable'
   }
  },
  {
   path: '/article',
   name: 'Article',
   component: Article,
   meta: {
    title: "文章详情",
    content: 'disable-no'
   }
  },
 //main.js里面的代码
 router.beforeEach((to, from, next) => {
 /* 路由发生变化修改页面meta */
 if(to.meta.content){
  let head = document.getElementsByTagName('head');
  let meta = document.createElement('meta');
  meta.content = to.meta.content;
  head[0].appendChild(meta)
 }
 /* 路由发生变化修改页面title */
 if (to.meta.title) {
  document.title = to.meta.title;
 }
 next()
});

效果如图: 

vue中动态设置meta标签和title标签的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
js中延迟加载和预加载的具体使用
Jan 14 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 #Javascript
node.js到底要不要加分号浅析
Jul 11 #Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 #Javascript
Vue如何实现响应式系统
Jul 11 #Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 #Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 #Javascript
vue使用中的内存泄漏【推荐】
Jul 10 #Javascript
You might like
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python实现二分查找算法实例
2015/05/26 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python装饰器实例大详解
2017/10/25 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
总经理的岗位职责
2014/02/23 职场文书
学校对教师的评语
2014/04/28 职场文书
合作协议书范文
2014/08/20 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
小学运动会宣传稿
2015/07/23 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
python的变量和简单数字类型详解
2021/09/15 Python
如何解决php-fpm启动不了问题
2021/11/17 PHP
MySQL详细讲解变量variables的用法
2022/06/21 MySQL