vue动态设置页面title的方法实例


Posted in Javascript onAugust 23, 2020

本文主要介绍了Vue动态修改title的方法,需要的朋友可以参考学习,方法如下:

1.通过自定义指令去修改(单个修改比较好)

//1.在main.js 页面里添加自定义指令
Vue.directive('title', {//单个修改标题
 inserted: function (el, binding) {
 document.title = el.dataset.title
 }
})
//2.在需要修改的页面里添加v-title 指令
<div v-title data-title="我是新的标题"></div>.

2.使用插件 vue-wechat-title

//1.安装插件
npm vue-wechat-title --save
//2.在main.js里面引入插件
import VueWechatTitle from 'vue-wechat-title'//动态修改title
Vue.use(VueWechatTitle)
//3.在路由里面 添加title
   routes: [{
   path: '/login',
   component: Login,
   meta: {
    title: '登录'
   }
  }, {
   path: '/home',
   component: Home,
   meta: {
    title: '首页'
   }
  },]

//4.在app.vue 中添加 指令 v-wechat-title
<router-view v-wechat-title='$route.meta.title' />

3.通过 router.beforeEach 导航守卫来修改

//1.在router的index里写自己的路径和title
const router = new Router({
 routes: [
  {
   path: '/login',
   component: Login,
   meta: {
    title: '登录',
   },
  },
  {
   path: '/home',
   component: Home,
   meta: {
    title: '首页',
   },
  },
 ],
})
//2.使用router.beforeEach对路由进行遍历,设置title
router.beforeEach((to, from, next) => {
 //beforeEach是router的钩子函数,在进入路由前执行
 if (to.meta.title) {
  //判断是否有标题
  console.log(to.meta.title)
  document.title = to.meta.title
 } else {
  document.title = '默认title'
 }
 next()
})

4.使用 vue-mate 修改 title

https://github.com/declandewet/vue-meta 文档中比较详细地说明了在浏览器端和服务器端如何使用 vue-meta 修改页面头部信息

总结

到此这篇关于vue动态设置页面title的文章就介绍到这了,更多相关vue动态设置页面title内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
简单实现js上传文件功能
Aug 21 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue管理系统前端之组件拆分封装详解
Aug 23 #Javascript
Vue中keep-alive组件的深入理解
Aug 23 #Javascript
google广告之另类js调用实现代码
Aug 22 #Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 #Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 #Javascript
JavaScript中的函数式编程详解
Aug 22 #Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 #Javascript
You might like
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHPMailer发送邮件
2016/12/28 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python虚拟环境的创建和使用详解
2020/09/07 Python
波兰珠宝品牌:YES
2019/08/09 全球购物
材料化学应届生求职信
2013/10/09 职场文书
分公司经理岗位职责
2013/11/11 职场文书
销售总监工作职责
2013/11/21 职场文书
天网工程实施方案
2014/03/26 职场文书
学校文明单位申报材料
2014/05/06 职场文书
银行求职信范文
2014/05/26 职场文书
拾金不昧表扬信
2015/01/16 职场文书
门球健将观后感
2015/06/16 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB