耀极客论坛

 找回密码
 立即注册
查看: 481|回复: 0

vue 动态设置浏览器标题的方法详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 01:13:25 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了vue动态设置浏览器标题的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助


废话
  平时设置浏览器标题是这样的


  但vue是单页面应用,入口文件也只有一个html,只能设置一个标签,所以下面介绍两种常用的动态设置浏览器标签的方法

正文

第一种
  使用浏览器原生方法 document.title

router/index.js

  router.beforeEach里
  1. //多语言项目,根根据自己项目来
  2. import i18n from '@/i18n/index';
  3. document.title = i18n.t("router." + to.name)
  4. //单语言项目
  5.   document.title = to.name
复制代码


  语言切换路由不变,所以也要加一下,单语言项目不用
  1. //多语言项目
  2.   document.title = i18n.t("router." + to.name)
复制代码


  完活,推荐使用,原生兼容性好,不用下载安装其他依赖包

第二种
  使用插件

1.安装插件
  1. npm install vue-wechat-title --save
复制代码
2.main.js 引用
  1. import VueWechatTitle from 'vue-wechat-title'//动态修改title
  2. Vue.use(VueWechatTitle)
复制代码
3.添加指令
  1. //多语言项目
  2.   ‹router-view v-wechat-title="$t('router.' + $route.name)" >‹/router-view>
  3. //单语言项目
  4.   ‹router-view v-wechat-title=" $route.name" >‹/router-view>
复制代码
  完活

笔记
  注意:值根据自己项目路由结构来,本demo用的是name值,i18n有对应语言包,

  你可以在meta对象里加个title属性,在外面用to.meta.title即可





总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:16 , Processed in 0.070315 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表