原文地址:http://www.cnblogs.com/JimmyBright/p/7410771.html

前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架,传统的每个页面设置title标签的做法是不行的。

下面是在Vue框架下,利用路由来设置title的思路,当然还有别的方法。

先看项目目录

router的index.js代码如下:

 import Vue          from 'vue'
import Router from 'vue-router'
import signProtocol from '@/components/pages/signProtocol'
import personInfo from '@/components/pages/personInfo'
import uploadPhoto from '@/components/pages/uploadPhoto'
import utils from '@/lib/utils'
Vue.use(Router)
var router= new Router({
mode:'history',
routes: [
{
path: '/',
name: 'uploadPhoto',
title:'上传身份证',
component: uploadPhoto,
},
{
path:'/personinfo',
name:'personInfo',
title:'提交信息',
component:personInfo
},
{
path:'/signprotocol',
name:'signProtocol',
title:'签署协议',
component:signProtocol
}
]
})
router.beforeEach((to, from, next) => {
next()
});
router.afterEach((transition)=>{
let name = transition.name
let item = router.options.routes.filter((ele)=>{return ele.name == name})
console.log(item[0].title)
utils.setTitle(item[0].title)
})
export default router;

router/index.js

代码中在router中增加了参数title,在路由结束钩子afterEach里取到对应页面的title,再设置上去就可以了

需要用到的utils里的方法如下:

 import axios from 'axios';
const SCREEN_WIDTH = document.body.clientWidth
const SCREEN_HEIGHT=document.body.scrollHeight
function service_sidi(url,body,successCallback,errorCallBack){
axios.post(process.env.Host_url+url,body).then(function(result){
successCallback(result)
},function(error){errorCallBack(error)})
}
function service_jz(url,body,successCallback,errorCallBack){
axios.post(process.env.Host_url+url,body).then(function(result){
successCallback(result)
},function(error){errorCallBack(error)})
}
function setTitle(title) {
document.title = title
var mobile = navigator.userAgent.toLowerCase()
if (/iphone|ipad|ipod/.test(mobile)) {
var iframe = document.createElement('iframe')
iframe.style.display = 'none'
// iframe.setAttribute('src', '')
var iframeCallback = function () {
setTimeout(function () {
iframe.removeEventListener('load', iframeCallback)
document.body.removeChild(iframe)
}, 0)
}
iframe.addEventListener('load', iframeCallback)
document.body.appendChild(iframe)
}
}
var obj={
service_sidi:service_sidi,
service_jz:service_jz,
SCREEN_WIDTH:SCREEN_WIDTH,
SCREEN_HEIGHT:SCREEN_HEIGHT,
setTitle:setTitle
}
export default obj;

lib/utils/index.js

Vue设置页面的title的更多相关文章

  1. .Net语言 APP开发平台——Smobiler学习日志:如何设置页面的title

    1.修改Mobile Form的TitleText的属性 输入需要显示标题,如图1: 2.修改Mobile Form的TitleStyle属性 其中包括Image属性(窗体图标).BackColor属 ...

  2. 使用vue-router设置每个页面的title

    进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由 ...

  3. 获取页面的title值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. python抽取指定url页面的title方法

    python抽取指定url页面的title方法 今天简单使用了一下python的re模块和lxml模块,分别利用的它们提供的正则表达式和xpath来解析页面源码从中提取所需的title,xpath在完 ...

  5. vue项目设置每个页面的title

    1.在项目目录下安装vue-wechat-title 2.在main.js中 使用vue-wechat-title 3.在router的配置中设置 4.在每个vue页面中加入 <div v-we ...

  6. java后台修改ZK页面的title

    Clients.evalJavaScript("document.title='"+basicDBObject.getString("systemName")+ ...

  7. 每个页面的Title样式

    <style>.zc_lan14 {}{    TEXT-ALIGN: center; FONT-FAMILY: "微软雅黑"; MARGIN-BOTTOM: 3px; ...

  8. 在父页面用Iframe加载子页面时,将父页面的title替换成子页面title

    报告管理

  9. Python脚本控制的WebDriver 常用操作 <六> 打印当前页面的title及url

    下面将使用WebDriver来答应浏览器页面的title和访问的地址信息 测试用例场景 测试中,访问1个页面然后判断其title是否符合预期是很常见的1个用例: 假设1个页面的title应该是'hel ...

随机推荐

  1. Unity在OpenGL模式下Shader编译报错

    报错信息 GLSL compilation failed: 0(21) : error C7528: OpenGL reserves names containing '__' 双击报错VS自动打开V ...

  2. Unity优化方向——优化Unity游戏中的垃圾回收(译)

    介绍 当我们的游戏运行时,它使用内存来存储数据.当不再需要该数据时,存储该数据的内存将被释放,以便可以重用.垃圾是用来存储数据但不再使用的内存的术语.垃圾回收是该内存再次可用以进行重用的进程的名称. ...

  3. linux 启动自动运行

    开机启动时自动运行程序  Linux    1.加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init.init根据配置文件继续引导过程,启动其它进程.通常情况下,修改放置在 /etc/rc ...

  4. Axure 制作 轮播 左右按钮轮播图

    1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 ...

  5. 防csrf详解

    CSRF概念:CSRF跨站点请求伪造(Cross—Site Request Forgery),跟XSS攻击一样,存在巨大的危害性,你可以这样来理解:       攻击者盗用了你的身份,以你的名义发送恶 ...

  6. 通过spark-submit提交hadoop配置的方法

    通过spark提交的spark开头的配置在程序启动后会添加到SparkConf中,但是hadoop相关的配置非spark开头会被过滤掉,但是只要在这些配置的key前面添加spark.hadoop.前缀 ...

  7. java基础学习总结——线程(二)

    一.线程的优先级别

  8. HDFS handler

    http://docs.oracle.com/goldengate/bd1221/gg-bd/GADBD/GUID-85A82B2E-CD51-463A-8674-3D686C3C0EC0.htm#G ...

  9. 使用SSD目标检测c++接口编译问题解决记录

    本来SSD做测试的Python接口用起来也是比较方便的,但是如果部署集成的话,肯定要用c++环境,于是动手鼓捣了一下. 编译用的cmake,写的CMakeList.txt,期间碰到一些小问题,简单记录 ...

  10. python之爬虫_模块

    目录 一.requests模块二.Beautifulsoup模块 一.requests模块 1.介绍 Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但 ...