Vue设置页面的title
2017-08-22 11:26
519 查看
原文地址:http://www.cnblogs.com/JimmyBright/p/7410771.html
前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架,传统的每个页面设置title标签的做法是不行的。
下面是在Vue框架下,利用路由来设置title的思路,当然还有别的方法。
先看项目目录
lib/utils/index.js
前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架,传统的每个页面设置title标签的做法是不行的。
下面是在Vue框架下,利用路由来设置title的思路,当然还有别的方法。
先看项目目录
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-router设置每个页面的title方法
- vue 如何添加全局函数或全局变量以及单页面的title设置总结
- vue 如何添加全局函数或全局变量以及单页面的title设置总结
- vue-router动态设置页面title的实例讲解
- vue-router动态设置页面title
- 使用vue-router设置每个页面的title
- (四)vue开发 - 根据vue-router的meta动态设置html里<title>标签的内容
- .NET中后台设置页面title使得IE下页面布局混乱
- VUE单独页面body css设置
- 浅谈vue2 单页面如何设置网页title
- Vue-cli 中为单独页面设置背景色的方法
- 动态设置ASPX页面的Title值
- asp.net动态设置页面的title,meta标签
- html 页面 title keyworld 的 SEO优化的 基本设置格式
- [置顶] 在vue路由变化的时候,改变页面的title
- vue-router设置页面标题
- vue中动态设置meta标签和title标签的方法
- asp.net动态设置页面的title,meta标签
- .Net语言 APP开发平台——Smobiler学习日志:如何设置页面的title
- Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理