vue动态修改浏览器标题和logo

admin管理员组

文章数量:1534194

问题描述

需要将一个系统，更改一下标题、logo，然后部署成另一个系统，由于不想单独拉出一套代码（单独拉出来后维护成本增加），所以想要动态改变系统标题和图标

解决方案

将项目制造一个入口可以修改项目的名称和logo，后端给了一个上传logo的接口，一个更改项目名称的接口，我上传logo，后端返回给我一个图片链接，我更改项目名称，后端返回一个项目名称，我将项目logo和项目名称存入vuex，并监听vuex里的项目名称和项目logo,一旦项目名称和项目logo发生改变，就可以将项目名称和项目logo实时改掉

 关于，如何上传这个逻辑就不写了，直接写如何实时更改l浏览器上项目名称和项目logo，找到项目中的app.vue 文件，动态创建link标签，调用后端接口，获取返回的图片

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

<script>
import {config, configKey, logosimg1, syslog1} from "@/api/menu";
import Cookies from "js-cookie";
import {mapGetters} from "vuex";

export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true,
      link :document.querySelector("link[rel*='icon']")
    }
  },
  created() {
    this.getproject()
    this.getlogo()
  },
  computed:{
    ...mapGetters(['getSetLogol','getSetName']),
    setLogo(){
      return this.getSetLogol
    },
    setName() {
      return this.getSetName
    }
  },
  watch:{
   //每次监听到项目名称和logo改变，就调后端返回项目名称和logo的接口，目的就是为了实时改变项目名 
   称和logo
    setLogo(newUrl){
      this.getlogo()
    },
    setName(newName){
      this.getproject()
    }
  },
  methods: {
    //获取项目名字
    getproject(){
      if(Cookies.get('Admin-Token')){
        //登录之后
        configKey().then((res)=>{
          this.$store.dispatch('settings/setName', res.msg)
          document.title=res.msg
        })
      }else {
        //登录之前
        config().then((res)=>{
          this.$store.dispatch('settings/setName', res.msg)
          document.title=res.msg
        })
      }
    },
    // 获取项目logo
    getlogo(){
      if(Cookies.get('Admin-Token')){
        //登录之后
        logosimg1().then((res)=>{
          this.$store.dispatch('settings/setLogol', res.msg)
          var link = document.querySelector("link[rel*='icon']")
          link.href=res.msg
        })
      }else {
        //登录之前
        syslog1().then((res)=>{
          this.$store.dispatch('settings/setLogol', res.msg)
          var link = document.querySelector("link[rel*='icon']")
          link.href=res.msg
        })
      }
    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

 以上代码就能实现动态更改浏览器标题和logo

本文标签： 浏览器标题动态vueLOGO