使用vue前端框架做,竟然丢弃了很多javascript和html的东西了。。
动态设置title的方法:

1.使用vue的自定义指令


<div v-title>{{htmltitle}}</div>
...
directives: {
title: {
inserted: function (el, binding) {
document.title = el.innerText
el.remove()
}
}
}

2.很简单


// 设置html title
document.title = sessionStorage.getItem('title')

3.router路由不同的title


...
routes: [
{
path: '/index',
name: 'index',
component: index,
meta:{
title:'首页'
}
},
{
path: '/user',
name: 'user',
component: user,
meta:{
title:'个人中心'
}
}
]
...
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})

原文地址:https://segmentfault.com/a/1190000016801359

动态设置html的title的更多相关文章

  1. vue开发 - 根据vue-router的meta动态设置html里title标签内容

    1.路由文件 :router/index.js 添加 meta属性配置: import Vue from 'vue' import Router from 'vue-router' import in ...

  2. 动态设置Head的Title、Descrption

    HtmlMeta desc = new HtmlMeta(); desc.Name = "Description"; desc.Content = strTitle.ToStrin ...

  3. vue动态设置页面title方法

    第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wech ...

  4. JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)

    代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面.         //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...

  5. 移动端rem,scale动态设置

    pt:物理像素(电容屏上像素块个数) px:逻辑像素.设备独立像素 高清屏:1px = 4pt 普通屏:1px = 1pt dpr:设备像素比:(某一方向上)物理像素/逻辑像素 通常设置1rem=屏幕 ...

  6. 基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  7. C#动态设置匿名类型对象的属性

    用C#写WPF程序, 实现功能的过程中碰到一个需求: 动态设置对象的属性,属性名称是未知的,在运行时才能确定. 本来这种需求可以用 Dictionary<string, object> 实 ...

  8. 利用jQuery动态设置单选框的选中

    一.需要实现的效果 这里使用jQuery来实现.需要实现的效果如下:当下拉条改变时,单选框选中的值随之变化. <!DOCTYPE html> <html> <head&g ...

  9. postman提取接口的返回值及动态设置变量(一)

    一.提取接口返回值   1.当返回值是返回JSON时 let json = JSON.parse(responseBody); // responseBody是包含整个返回内容的字符串 let foo ...

随机推荐

  1. [HNOI2017]抛硬币

    Description 小A和小B是一对好朋友,他们经常一起愉快的玩耍.最近小B沉迷于××师手游,天天刷本,根本无心搞学习.但是已经入坑了几个月,却一次都没有抽到SSR,让他非常怀疑人生.勤勉的小A为 ...

  2. hdu6070Dirt Ratio 多校题 套路二分

    比赛中我看了一眼题目就觉得是二分的套路,跟miaom说,结果发现miaom开始碎觉 miaom醒来以后表示这是道凸包合并(%%%) 我&wzf2000:那您快写啊 miaom:我不会写啊 莫名 ...

  3. codeforces597C-树状数组优化dp

    因为整个序列为一个1-n的排列,所以可以这样dp dp[i][j]代表长度为i,以数字j结尾的子序列 dp[i][j]=dp[i-1][1,2,3...j-1]; 这道题的答案就是 dp[k+1][1 ...

  4. Python中输出字体的颜色设置

    1.实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.控制字符颜色的转义序列是以ESC开头,即用\033来完成 2.书写过程 开头部分: \033[显示方式;前 ...

  5. Net Core迁移到MSBuild

    Net Core迁移到MSBuild平台(二)   阅读目录 一.前言 二.XML定义 三.结语 回到目录 一.前言 在上一篇文章.Net Core迁移到MSBuild的多平台编译问题中,简单的讲了下 ...

  6. 转 event 'utl_file I/O':

    The ASH report shows tables and data files with wait event 'utl_file I/O': CHANGES No changes. CAUSE ...

  7. JavasJavaScript笔试题

    这几天参加了好多场宣讲会,记录一下遇到的编程题还有平时练习遇到的(如果有更好的方法欢迎提出,本人也是菜鸟一枚): 1.数组查重,并返回出重复次数最多的项并记录重复次数: function chacho ...

  8. CF1142A The Beatles

    思路: 令p表示步数,l表示步长.由于p是使(l * p) % (n * k) == 0的最小的p,所以p = (n * k) / gcd(n * k, l). 设l = k * x + r,则由题意 ...

  9. JavaScript是什么

    JavaScript是一种解释型语言而不是编译型语言,它往往被认为是一种脚本语言,而不被看作是一种真正的编程语言.也就是说,脚本语言比较简单,它们是非程序员所使用的编程语言. 如果一个程序员对Java ...

  10. 零基础逆向工程21_PE结构05_数据目录表_导出表

    数据目录 1.我们所了解的PE分为头和节,在每个节中,都包含了我们写的一些代码和数据,但还有一些非常重要 的信息是编译器替我们加到PE文件中的,这些信息可能存在在任何可以利用的地方. 2.这些信息之所 ...