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中的集合及效率
Jan 08 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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
php4的session功能评述(三)
2006/10/09 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
xtree.js 代码
2007/03/13 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
javascript解析json实例详解
2014/11/05 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
分享一个常用的Python模拟登陆类
2015/03/29 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python中的字符串替换操作示例
2016/06/27 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
python tkinter canvas使用实例
2019/11/04 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
python 实现批量图片识别并翻译
2020/11/02 Python
如何查看python关键字
2021/01/17 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
本科生求职信
2014/06/17 职场文书
加入学生会自荐书
2015/03/05 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript