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 相关文章推荐
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
Javascript创建类和对象详解
May 31 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
Seajs源码详解分析
2019/04/02 Javascript
npm的lock机制解析
2019/06/20 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python多线程实例教程
2014/09/06 Python
django实现分页的方法
2015/05/26 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
容易被忽略的Python内置类型
2020/09/03 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
教师绩效工资方案
2014/02/01 职场文书
员工工作表扬信
2015/05/05 职场文书
市级三好生竞选稿
2015/11/21 职场文书