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 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
js中Object.create实例用法详解
Oct 05 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
php 三维饼图的实现代码
2008/09/28 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
使用vue.js制作分页组件
2016/06/27 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
js中的闭包学习心得
2018/02/06 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
Python中replace方法实例分析
2014/08/20 Python
python实现调用其他python脚本的方法
2014/10/05 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
django使用html模板减少代码代码解析
2017/12/12 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
python 字符串只保留汉字的方法
2018/11/16 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
房产买卖委托公证书
2014/04/04 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers