vue 项目中，动态修改浏览器标签页的图标

vue 项目中，动态修改浏览器标签页的图标

需求：
项目中有一个入口可以修改平台的名称和图标，图标同步展示为浏览器页签的图标

实现：
1.找到项目中的app.vue 文件，动态创建link标签，调用后端接口，获取返回的图片，我的项目中，后端返回的图片格式为base64格式

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>

import { getCompanyInfo } from '@/api/vone/base/index'

export default {
  name: 'App',

  data() {
    return {
      logoImage: ''

    }
  },
  async created() {
    await this.getInfo()
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link')
    link.type = 'image/x-icon'
    link.rel = 'shortcut icon'
    link.href = this.logoImage
    document.getElementsByTagName('head')[0].appendChild(link)
  },
  methods: {
    async getInfo() {
      const res = await getCompanyInfo(
        'cloudbooster'
      )

      if (!res.isSuccess) {
        this.$message.warning(res.msg)
        return
      }

      if (res.data && res.data.value) {
        this.logoImage = res.data.value
      } else {
        this.logoImage = ''
      }
    }

  }
}
</script>

在编辑企业设置的对话框，保存时，使路由直接跳转到登录页，并使用location.reload() 强制刷新页面

async saveInfo() {
      try {
        await this.$refs.companyForm.validate()
      } catch (e) {
        return
      }
      // const userInfo = storage.get('user')
      try {
        this.saveLoading = true
        const { isSuccess, msg } = await apiBaseCompanySetting(
          { ...this.companyForm }
        )
        this.saveLoading = false
        if (!isSuccess) {
          return this.$message.error(msg)
        }
        this.$message.success('保存成功')
        this.onClose()
        this.$emit('success')

        await this.$store.dispatch('user/logout')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        location.reload()
      } catch (e) {
        this.saveLoading = false
      }
    },