vue 动态设置浏览器标题的方法详解
更新时间：2021年12月26日 16:35:58 作者：郭顺杰
这篇文章主要为大家介绍了vue动态设置浏览器标题的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
废话
平时设置浏览器标题是这样的
但vue是单页面应用，入口文件也只有一个html，只能设置一个标签，所以下面介绍两种常用的动态设置浏览器标签的方法
正文
第一种
使用浏览器原生方法 document.title
router/index.js
router.beforeEach里
//多语言项目，根根据自己项目来
import i18n from '@/i18n/index';
document.title = i18n.t("router." + to.name)
//单语言项目
document.title = to.name
语言切换路由不变，所以也要加一下，单语言项目不用
//多语言项目
document.title = i18n.t("router." + to.name)
完活，推荐使用，原生兼容性好，不用下载安装其他依赖包
第二种
使用插件
1.安装插件
npm install vue-wechat-title --save
2.main.js 引用
import VueWechatTitle from 'vue-wechat-title'//动态修改title Vue.use(VueWechatTitle)
3.添加指令
//多语言项目
<router-view v-wechat-title="$t('router.' + $route.name)" ></router-view>
//单语言项目
<router-view v-wechat-title=" $route.name" ></router-view>
完活
笔记
注意：值根据自己项目路由结构来，本demo用的是name值，i18n有对应语言包，
你可以在meta对象里加个title属性，在外面用to.meta.title即可
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要为大家介绍了Vue如何实现字母验证码详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）
这篇文章主要介绍了vue vantUI实现文件（图片、文档、视频、音频）上传（多文件），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
el-select如何获取下拉框选中label和value的值
在开发业务场景中我们通常遇到一些奇怪的需求,例如el-select业务场景需要同时获取我们选中的label跟 value,下面这篇文章主要给大家介绍了关于el-select如何获取下拉框选中label和value的值,需要的朋友可以参考下2022-10-10
vue mounted周期中document.querySelectorAll()获取不到元素的解决
这篇文章主要介绍了vue mounted周期中document.querySelectorAll()获取不到元素的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了webpack中的optimization配置详解,主要就是根据不同的策略来分割打包出来的bundle,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
本文以校验两次密码的一致性应用，给出两个可变属性值的字段之间的联合校验的典型解决方案，通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现，需要的朋友一起看看吧2021-07-07
这篇文章主要介绍了详解Vue.js iview实现树形权限表（可扩展表），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue各种事件监听实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了vue-awesome-swiper滑块插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue项目热更新的坑及解决方案，具有很好的参考价值，希望对的大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论