Vue修改网页标签栏标题以及标签栏图标

动态获取网页标签栏标题及图标地址

1.刚进入的第一个页面中发送请求,获取图标及名称
<template><div></div>
</template><script>
import {copyrightDataList} from '@/api/Copyright/index'export default {data() {return {};},mounted() {this.requestTab(); //获取网页标签栏标题及图标地址},methods: {//获取网页标签栏标题及图标地址requestTab() {requestTab({database: "tw",pageNum: 1,pageSize: 10,}).then((res) => {let img = res.data.data.pageData[0].imgList[0];let name = res.data.data.pageData[0].originalSource;window.sessionStorage.setItem("imgLogo", img);window.sessionStorage.setItem("title", name);});},},
};
</script><style  scoped>
</style>
2.在打包的index.html文件中实现赋值
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3292342_lr0r2ypcpcp.css"><title><%= htmlWebpackPlugin.options.title %></title>
</head>
<script>window.onload = function () {var link = document.querySelector("link[rel*='icon']") || document.createElement('link');link.type = 'image/x-icon';link.rel = 'shortcut icon';link.href = window.sessionStorage.getItem('imgLogo');   //标签栏图标地址document.getElementsByTagName('head')[0].appendChild(link);document.title=window.sessionStorage.getItem('title');  //标签栏名称}
</script><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected -->
</body></html>


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部