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 动态设置浏览器标题相关推荐

vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上方法一.使用插件vue-wechat-title来设置浏览器动态标题第一步:安装插件 1. npm vue-wechat-title --save 第二步:在全局ma ...
vue项目设置浏览器标题title及图标
一.固定设置标题方案方法一:在vue.config.js文件,添加如下代码: chainWebpack: config => {config.plugin('html').tap(args = ...
vue项目设置浏览器标题title
VUE2: 一.固定设置标题方案方法一,在vue.config.js文件添加如下代码: chainWebpack: config => {config.plugin('html').tap( ...
vue动态修改浏览器标题和图标
项目场景: 在一个功能一致的项目中,要分别部署成两个系统. 问题描述两个系统名称不一致.标题不一致.logo不一致,又不想单独拉出一套代码(单独拉出后维护成本增加),想要动态改变. 解决方案: 在m ...
Vue动态设置Style属性
Vue动态设置Style属性_fuzhongbin的博客-CSDN博客_vue 动态style :style="{ color:domain.groups == 1? '#ccc': dom ...
[vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
QT 定时关机、共享内存、启动浏览器、浏览器前进后退刷新、进度条、设置浏览器标题、QML入门
定时关机 .h #include <QTimer> #include <stdlib.h> #include <QByteArray>//构造函数 //system ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
vue 动态设置组件高度_高度动态的Vue明星评分组件
vue 动态设置组件高度虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars ratin ...
Vue 中设置浏览器的 title 跟随路由的名称变化
Vue 中设置浏览器的 title 跟随路由的名称变化浏览器title的变化会根据路由的变化而改变可以先设置一个公共的文件夹setting, 用于存放公共的名称, 例如这里的 `小火车况且况且 m ...

vue 动态设置浏览器标题

废话

正文

第一种

第二种

笔记

vue 动态设置浏览器标题相关推荐

最新文章

热门文章