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

爱吃棉花糖#

已于 2023-01-30 17:22:47 修改

阅读量2.2k

点赞数

分类专栏：【VUE】【开发笔记】文章标签： vue.js javascript 前端

于 2023-01-30 17:19:28 首次发布

本文链接：https://blog.csdn.net/ch_13157582015/article/details/128805786

版权

【开发笔记】同时被 2 个专栏收录

55 篇文章 1 订阅

订阅专栏

【VUE】

31 篇文章 1 订阅

订阅专栏

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

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>