因为和原生的交互是需要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()
});

转自:https://blog.csdn.net/qq_29515037/article/details/79475068

【转】vue中动态设置meta标签和title标签的更多相关文章

  1. vue中动态设置echarts画布大小

    document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...

  2. vue中select设置默认选中

    vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...

  3. 分别在javascript和JSP中动态设置下拉列表默认值

    一.JavaScript中动态设置select标签中<option>选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 ...

  4. Vue.之. 动态设置按钮Disabled

    Vue.之. 动态设置按钮Disabled 按钮代码如下: 添加了一个 属性      :disabled="isAble"  ,控制:更新按钮.重置按钮 <el-form- ...

  5. vue中动态引入图片为什么要是require, 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  6. Quartz在Spring中动态设置cronExpression (spring设置动态定时任务)

    什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定).      这样总不能修改配置文件每定制个定时任务就增加一个trigger吧,即便允许客户 ...

  7. Vue 中动态添加class(使用v-bind:class)

    今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...

  8. Quartz在Spring中动态设置cronExpression

    什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定). 这样总不能修改配置文件每定制个定时任务就增加一个trigger吧,即便允许客户修改配置文 ...

  9. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

随机推荐

  1. Python 安装 lxml 插件

    1.下载 lxml 地址:https://pypi.python.org/pypi/lxml/3.8.0#downloads 我用的是python 3.6,我下载了  lxml-3.8.0-cp36- ...

  2. hdu 3094 A tree game 树上sg

    A tree game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Prob ...

  3. Virtualbox-CentOS网络配置

    1.记下虚拟网卡IP 2. 配置网卡1.网卡2 网卡1 ---对应---eth0----NAT(网络地址转换)用来与外网通信 网卡2 ---对应---eth1----Host-only用来与主机通信 ...

  4. 数据库备份出现警告:Warning: Using a password on the command line interface can be insecure. Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transactions, even thos

    1.先来看原备份数据库语句: mysqldump -h 127.0.0.1 -uroot -ppassword database > /usr/microStorage/dbbackup/cap ...

  5. ubuntu 安装pip3 遇到Ignoring ensurepip failure: pip 8.1.1 requires SSL/TLS错误

    3.5版本之后的会自动安装pip,所以我们直接从官网下载3.5.2,下载地址:https://www.python.org/ftp/python/ 下载以后,可以用命令解压,也可以右键进行解压, ta ...

  6. Spring Boot的数据访问 之Spring Boot + jpa的demo

    1. 快速地创建一个项目,pom中选择如下 <?xml version="1.0" encoding="UTF-8"?> <project x ...

  7. oracle中索引的使用

    声明:以下内容是自己跟着教学视屏学习之后整理而来(主要是自用),如有侵权请告知,将尽快删除. 一.索引 1. 概述:数据库对象之一索引用于提高查询效率索引的内建工作对用户是透明的,由数据库自行维护,我 ...

  8. idea 启动时报 error:java 无效的源发行版

    说白了就是编译的版本不符合,有的地方是jdk1.7 有的地方是jdk1.8 所以你只要每个地方都保持一致就行. 每个地方!! 每个地方!! 每个地方!! 重要的设置说三遍! 以jdk1.7为例 fil ...

  9. 大整数加法 HDU1002

    今天早上没事干又把这个敲了一遍,虽然手冻得不行,不过又深入理解理解还可以哈. 难点就在给你的整数可能很大很长,所以long long 肯定不行,得用字符串来读取存储,然后注意一下相加的时候进位,最后输 ...

  10. 从RGB扫描图到数字化等高线矢量图

    1 用arcgis 对地形图进行校正,主要是通过判断地图的坐标系统,然后将图层的坐标系统设置正确.选择图上的经纬网交点,对原图进行校正,一般要求四角和均匀布点. 2 二值化图像.如果是RGB图像,即彩 ...