设置vue动态浏览器标题的方法有哪些-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

设置vue动态浏览器标题的方法有哪些

设置vue动态浏览器标题的方法有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

创新互联是一家集网站建设,桥西企业网站建设,桥西品牌网站建设,网站定制,桥西网站建设报价,网络营销,网络优化,桥西网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

本篇文章给大家带来了关于怎样利用vue来实现动态设置浏览器标题的效果,希望对大家有帮助。

vue 动态设置浏览器标题

平时设置浏览器标题如下图所示:

设置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

设置vue动态浏览器标题的方法有哪些
语言切换路由不变,所以也要加一下,单语言项目不用

//多语言项目
  document.title = i18n.t("router." + to.name)

设置vue动态浏览器标题的方法有哪些
完活,推荐使用,原生兼容性好,不用下载安装其他依赖包

第二种

使用插件

1.安装插件

npm install vue-wechat-title --save

2.main.js 引用

import VueWechatTitle from 'vue-wechat-title'//动态修改title
Vue.use(VueWechatTitle)

3.添加指令

//多语言项目
  
 //单语言项目
  

完活

笔记

注意:值根据自己项目路由结构来,本demo用的是name值,i18n有对应语言包,
你可以在meta对象里加个title属性,在外面用to.meta.title即可
设置vue动态浏览器标题的方法有哪些
设置vue动态浏览器标题的方法有哪些

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


新闻名称:设置vue动态浏览器标题的方法有哪些
标题路径:http://kswsj.cn/article/pgohcj.html

其他资讯