Vue动态修改网页浏览器标签的标题和图标

情景：平台功能支持修改系统的名称和图标，图标同步展示为浏览器页签的图标

效果：

1. main.js

Vue.directive('title', {inserted: function (el, binding) {document.title = el.dataset.title}
})

2. 修改router中index.js文件中每个路由加上 meta:{ title: ‘xxx’}

const router = new Router({mode: '',routes: [{path: '/ ',name: ' ',component:  ,meta:{// xxx是自己想要设置的标题名title: 'xxx'}}]
})

2. app.vue 在页面中直接对document.title赋值

if (null != that.sysInfo) {var link = document.querySelector("link[rel*='icon']") ||         document.createElement('link');link.type = 'image/x-icon';link.rel = 'shortcut icon';link.href = that.sysInfo.sysLogo;document.getElementsByTagName('head')[0].appendChild(link);}

Vue动态修改网页浏览器标签的标题和图标相关推荐

Vue修改网页浏览器标签的标题和图标
Vue修改网页浏览器标签的标题和图标方法一直接在./index.html中修改即可,如下: <title>lovEaNdpeAce</title> <link rel ...
Vue 动态修改网页标题和图标
VUE2: 二.普通方案,使用Vue-Router的beforeEach拦截 routes: [{path: '/',name: 'home',component: () => import(' ...
怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
动态修改网页title
动态修改网页title //如果在vue项目中在App.vue下的 created() 中输入 document.title = this.$store.state.user.name; //获取存 ...
动态修改网页icon图标
动态修改网页icon图标 //如果在vue项目中在App.vue下的 created() 中输入 var link = document.querySelector("link[rel*= ...
vue 动态修改路由参数
转载自 vue 动态修改路由参数 import merge from 'webpack-merge':修改原有参数 this.$router.push({query:merge(this.$rout ...
vue项目部署到服务器后浏览器标签上的小图标消失不见
背景: 最近在开发项目过程中发现一个问题,项目部署到服务器后在浏览器打开,会发现浏览器标签上的小图标消失不见了.百度查找问题,网上给出了许多解决的方案,例如清除浏览器缓存.把图标的相对路径改成绝对路径 ...
学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色
在Vue项目中使用svg标签却无法改变图标的颜色在学习 vue 实战项目的过程中,用到了 svg 模块,对其使用了 fill 属性后,图标的颜色却没有任何的改变,反复查看了视频,步骤是一模一样的,却 ...
vue动态修改浏览器标题和图标
项目场景: 在一个功能一致的项目中,要分别部署成两个系统. 问题描述两个系统名称不一致.标题不一致.logo不一致,又不想单独拉出一套代码(单独拉出后维护成本增加),想要动态改变. 解决方案: 在m ...

Vue动态修改网页浏览器标签的标题和图标

Vue动态修改网页浏览器标签的标题和图标相关推荐

最新文章

热门文章