原文地址: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. Python 字符串 整数 浮点数

    • 几个函数: str() : 将一个整数或者浮点数变成字符串 int() : 将一个浮点数或一个字符串变成整数 float : 将一个整数或者字符串变成一个浮点型数据 • 整数的运算永远是精确的,而 ...

  2. SSO流程

    SSO SSO又名单点登录,用户只需要登录一次就可以访问权限范围内的所有应用子系统.举个简单的例子,你在百度首页登录成功之后,你再访问百度百科.百度知道.百度贴吧等网站也会处于登录状态了,这就是一个单 ...

  3. linux后台启动程序脚本实例

    启动安装的zookeeper和kafka #!/bin/bash # start zookeeper and kafka service echo "========== Start the ...

  4. 使用vbox构建局域网络

    update: 也可以启用DHCP自动分配IP地址.(看到过的某一篇博文写过要使用这个服务还得自己搭--就没有动手去实践一下直接手动分配了静态的IP.偶然尝试了一下发现动态IP分配和手动静态IP分配都 ...

  5. killall命令详解

    基础命令学习目录首页 原文链接:https://blog.csdn.net/tanga842428/article/details/52474250 Linux系统中的killall命令用于杀死指定名 ...

  6. Python函数式编程中map()、reduce()和filter()函数的用法

    Python中map().reduce()和filter()三个函数均是应用于序列的内置函数,分别对序列进行遍历.递归计算以及过滤操作.这三个内置函数在实际使用过程中常常和“行内函数”lambda函数 ...

  7. Apache 工作模式的正确配置

       prefork work event

  8. ModelAndView在页面上取值时value="{contextConfigLocation=<NONE>}"

    后台: mv.getModel().put("initParam", 1); 页面: <input type="hidden" id="init ...

  9. mybatis批量插入oracle

    <insert id="batchInsert" parameterType="java.util.List"> INSERT INTO TEST( ...

  10. Daily Scrum (2015/10/26)

    今晚由于我们组成员就团队Week5作业的个人贡献分开会协商,所以把今天的编码工作往后延迟了.考虑到有些成员代码还没理解够,正好TFS的代码阅读分配的工作时间还没进行完,所以在会议之后我们让成员回寝自由 ...