【转】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,获取所填的元素即可 效果: ...
随机推荐
- _event_phase
EventId 事件ID Phase 阶段ID,从1开始 StopGUID 击杀生物或摧毁物体当前阶段结束,,正数为生物,负数为物体
- _itemmod_creation_enchant
该表控制物品产生时自动获得随机附魔效果 comment 备注 entry 物品entry slot 附魔位置1-5,这些位置都可以用来产生自带附魔效果 groupId 附魔组Id 对就_ ...
- 转 Failed to run the WC DB work queue associated with 错误的解决
svn 异常终止导致的缓存工作队列问题 解决方法:清空svn的队列 1.下载sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc.db 3.将sqlite3.exe放到.svn的同级 ...
- codeforces gym 101164 K Cutting 字符串hash
题意:给你两个字符串a,b,不区分大小写,将b分成三段,重新拼接,问是否能得到A: 思路:暴力枚举两个断点,然后check的时候需要字符串hash,O(1)复杂度N*N: 题目链接:传送门 #prag ...
- curl: (6) Could not resolve host: www.baidu.com;
今天,在执行curl时,突然发现这个报错,问题是之前完全没有出现过这样的情况. [root@localhost ~]# curl www.baidu.comcurl: (6) Could not re ...
- 基于python Arcface 实现人脸检测和识别
虹软的人脸识别技术也是很强的,重要的是他免费提供了离线的sdk,还提供了实例,这个是目前几家研究人脸识别的大公司里面少有的.识别能力正常用还是可以的.我这个代码是调用的离线sdk实现的 ``` fro ...
- java再次学习
1.maven配置.
- 最多的划分来使数组有序 Max Chunks To Make Sorted
2018-12-01 11:05:46 一.Max Chunks To Make Sorted 问题描述: 问题求解: 由于没有重复,所以直观的来看对于每个遇到数,其能够被划分出来的前提是其前面已经有 ...
- Linux中ulimit -c生成core文件()
理解这六个shell脚本语言的功能 echo "kernel.core_pattern = /tmp/core-%e-%p-%t" >> /etc/sysctl.con ...
- python中的面向对象学习以及类的多态
接下来类的第三个重要的特性:多态(一种接口,多种实现) 多态性(polymorphisn)是允许你将父对象设置成为和一个或更多的他的子对象相等的技术,赋值之后,父对象就可以根据当前赋值给它的子对象的特 ...