【转】vue中动态设置meta标签和title标签
因为和原生的交互是需要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标签的更多相关文章
- vue中动态设置echarts画布大小
document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...
- vue中select设置默认选中
vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...
- 分别在javascript和JSP中动态设置下拉列表默认值
一.JavaScript中动态设置select标签中<option>选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 ...
- Vue.之. 动态设置按钮Disabled
Vue.之. 动态设置按钮Disabled 按钮代码如下: 添加了一个 属性 :disabled="isAble" ,控制:更新按钮.重置按钮 <el-form- ...
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- Quartz在Spring中动态设置cronExpression (spring设置动态定时任务)
什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定). 这样总不能修改配置文件每定制个定时任务就增加一个trigger吧,即便允许客户 ...
- Vue 中动态添加class(使用v-bind:class)
今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...
- Quartz在Spring中动态设置cronExpression
什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定). 这样总不能修改配置文件每定制个定时任务就增加一个trigger吧,即便允许客户修改配置文 ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
随机推荐
- JAVA基础之复识二
JAVA语言 未经本人允许禁止转载或使用 基础知识:JAVA数据类型,运算符,流程控制等 注释: // 单行注释 /* 多行连续注释 ... */ /** 文档注释,该类型的注释会生成一个html文件 ...
- Echarts 修改字体样色 X、Y轴
1.雷达图修改字体颜色 polar: [ { name:{ show: true, formatter: null, textStyle: { //设置颜色 color: '#109cad' } }, ...
- 基因组与Python --PyVCF 好用的vcf文件处理器
vcf文件的全称是variant call file,即突变识别文件,它是基因组工作流程中产生的一种文件,保存的是基因组上的突变信息.通过对vcf文件进行分析,可以得到个体的变异信息.嗯,总之,这是很 ...
- 【转】Windows下selenium+python自动化测试环境搭建
原文链接:http://www.cnblogs.com/test-of-philosophy/articles/4322918.html 搭建平台:windows 1.安装python,下载地址:ht ...
- sql 中常见的控制流语句
控制流语句:1 begin .....end 2 if ...else 例如:if exists (select * from 表名称 ) begin selct * from 表名称 end ...
- 堆排序 java实现
import java.util.Arrays; /* * 思路: * 1.方法adjustDown:对于一个数组a[],针对第i个数进行向下(直到len-1)调整,使得该位置成为大顶堆 * 2.方法 ...
- 部署NTP服务器进行时间同步
NTP服务端:linl_S IP:10.0.0.15 NTP客户端:lin_C IP:10.0.0.16 NTP服务概述 1.原理 NTP(Network TimeProtocol,网络时 ...
- Eclipse Jee环境配置
最近下载了新的Eclipse Jee Neon版本,记录一下如何进行开发环境的配置. 1.下载必要的开发环境文件 ①下载Java SE Development Kit (简称JDK) ②下载Tomca ...
- 常用命令-python篇
1. pip 加速命令 pip install --index-url https://pypi.douban.com/simple pip install -i https://pypi.tuna. ...
- tcpdump使用方法总结
举例: 1.针对指定网卡eth0抓包 tcpdump -i eth0 2.过滤主机 tcpdump -i eth0 host 192.168.1.1 tcpdump -i eth0 src host ...