vue 修改标题栏_VUE动态修改titile的三种方法
第一种:适用于在已经定义好title的情况下,例如首页,关于页等等
1.1 main.js
const defaultTitle = '默认 title'router.beforeEach((to, from, next)=>{
document.title= to.meta.title ?to.meta.title : defaultTitle
next()
})
1.2 index.js
routes: [
{
name:'home',
path:'/home/:openname',
component: Home,
meta: {
title:'首页'}
}
]
第二种:vue-meta 插件(适用于无法固定title的情况下,例如文章页)
2.1 安装
npm install vue-meta --save
2.2 在main.js引入
import Meta from 'vue-meta'Vue.use(Meta)
2.3 为需要修改的页面单独定义metaInfo
export default{
metaInfo: {
title:'This is the test',
meta: [
{ charset:'utf-8'},
{ name:'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes'}
]
}
}
2.4 异步请求数据可以使用
如果component中使用了异步请求数据,可以使用 metaInfo() 方法。
{{{ title }}}
name:'post',
data () {return{
title:''description:'这是一篇文章...'}
},
metaInfo () {return{
title:this.title,
meta: [
{ vmid:'description', name: 'description', content: this.description }
]
}
},
created () {this.initData()
},
methods: {
initData () {
axios.get('some/url').then((resp) =>{//设置title时 metaInfo 会同时更新
this.title =resp.titlethis.description =resp.decription
})
}
}
}
第三种:vue-wechat-title
3.1 安装
npm install vue-wechat-title --save
3.2 在main.js中引入
import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)
3.3 使用
在router>index.js中添加meta对象配置title
const router = new Router({
routes: [
...
{
path: "/gameDesc",
name: 'gameDesc',
component: resolve => import('@/pages/Game/gameDesc'),
meta:{
title: '游戏说明'
}
},
{
path: "/integralList",
name: 'integralList',
component: resolve => import('@/pages/Game/integralList'),
meta:{
title: '积分收取记录'
}
}
...
]
});
router.afterEach(route => {
// 从路由的元信息中获取 title 属性
if (route.meta.title) {
document.title = route.meta.title;
// 如果是 iOS 设备,则使用如下 hack 的写法实现页面标题的更新
if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
const hackIframe = document.createElement('iframe');
hackIframe.style.display = 'none';
hackIframe.src = '/static/html/fixIosTitle.html?r=' + Math.random();
document.body.appendChild(hackIframe);
setTimeout(_ => {
document.body.removeChild(hackIframe)
}, 300)
}
}
});
export default router;
在App.vue中修改router-view
vue 修改标题栏_VUE动态修改titile的三种方法相关推荐
- ABAP中创建动态内表的三种方法(转载)
BAP中创建动态内表的三种方法 第一种: 如果我们需要的动态内表字段或者动态工作区和数据字典中的类型一致,可以直接使用CREATE DATA生成,当然也可以是自定义类型. 比如要产生和数据表MARA结 ...
- 免越狱!苹果iPhone手机怎样修改运营商名称?教你三种方法!
上次分享了安卓手机和苹果手机修改运营商的方法,小伙伴反馈回来一些问题,先解答以下安卓手机修改运营商遇到的问题,有的小伙伴可能会遇到无法修改的问题,解决方法很简单,只需要在应用管理中将APP的悬浮窗权限 ...
- 修改IE标题栏,显示自己名字的三种方法
来源:http://hi.baidu.com/jxzq007/blog/item/4ab2ebbf6f666f0918d81fb1.html 方法1:注册表修改法 开始->运行->输入&q ...
- fiddler修改接口请求返回数据Response的三种方法
背景 访问某个URL地址,正常返回结果是 {"code":0,"msg":"success","rows":[" ...
- linux设置环境变量java_home,Linux下修改和设置环境变量JAVA_HOME的三种方法
1. 永久修改,对所有用户有效 # vi /etc/profile //按键盘[Shift + g], 在profile文件最后添加下面的内容: export JAVA_HOME = /home/my ...
- windows动态添加lib的三种方法
方法1: 通过设置工程配置来添加lib库. A.添加工程的头文件目录:工程-属性-配置属性-c/c+±–常规-附加包含目录:加上头文件存放目录. B.添加文件引用的lib静态库路径:工程-属性-配置属 ...
- vue 项目中,动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标 需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标 实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
- vue修改http请求头_vue-resouce设置请求头的三种方法
本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下: 第一种:在Vue实例中设置 var vm = new Vue({ el:'#rrapp', data:{ showLi ...
- vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
最新文章
- os的进程调度(读书笔记)
- 刨根问底:C++中宽字符类型(wchar_t)的编码一定是Unicode?长度一定是16位?
- Machine Learning week 7 quiz: Unsupervised Learning
- codeblocks调用matlab,matlab engine: 在Codeblocks中使用C++调用matlab | 学步园
- python sklearn下载了但是引用失败_关于python:导入sklearn时出错
- Java多线程神器:join使用及原理
- Mac 键盘符号整理
- C#.NET验证码智能识别学习笔记---04C#.Net图片操作
- mysql from_unixtime(_MySQL 数据库中日期与时间函数 FROM_UNIXTIME(), UNIX_TIME()
- 周华健,歌声伴我成长(五)
- [BZOJ5329] [SDOI2018] 战略游戏
- ASP.NET MVC学习系列 WebAPI初探
- Android项目总结(3)-登录页图片循环过渡播放动画效果
- java编写flash相册的制作软件,Flash电子相册制作工具(Amazing Flash Gallery Maker)
- WIFI adb重启后仍然生效
- 《计算机建筑绘图》在线考试,《建筑制图与识图》在线开放课程开讲了
- Edwin windows下基本命令:
- 小米Mix2s刷机教程
- 海康、大华网络摄像机RTSP流接入流媒体实现WEB无插件直播通过视频广场观看实时直播
- MATLAB提取txt文本文档中特定关键字后的数字信息