根据二级域名换项目中的logo图片

根据域名换logo图片？what?身为一个实习生的我，当我听到这个的时候脑子中一片懵啊懵？什么二级域名，换什么logo?
当时带我们的大哥，于某一日突然问我们，这个问题有没有什么想法。当时我的第一个想法是，就是根据路由判断呗，由于当天脑子短路了，想法是，获取路由，然后写一个路由正则，匹配是否正确，控制显示隐藏图片。（有这种想法是因为，现在项目里只有两个域名。所以就想到了v-show）但是再想想的确是，要是以后出个十个八个的域名，咋搞（内心：啥也不是）。
经过继续想，首先，获取路由这肯定是对的，于是思路就是：
mounted的时候获取url—>进行url的切割(因为二级域名，也就是比正常域名多个点嘛，比如：www.jd.com 二级域名：www.m.jd.com)
—>把logo图片的名字换成跟域名一样的（比如：jd.png 二级域名就是 m.png）—>再绑定img的src进行动态赋值

那么思路确定了 就开始写呗。

第一步：获取url
写vue写的我满脑子都是this.$route去找信息，来，咱们先回顾一下，js获取url的方法
window.location.host; //返回url 的主机部分，例如：www.xxx.com  
window.location.hostname; //返回www.xxx.com  
window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)
window.location.pathname; //返回/a/index.php或者/index.php  
window.location.protocol; //返回url 的协议部分，例如： http:，ftp:，maito:等等。  
window.location.port //url 的端口部分，如果采用默认的80端口，那么返回值并不是默认的80而是空字符  

我是在app.vue里获取的这个，先用的created获取的url，进行切割，把域名赋值在data里，通过provide把值传递给所有子组件。在子组件中inject获取
app.vue
 provide(){
    return{
      imgUrl:this.imgUrl
    }
  },
  data(){
    return{
      imgUrl:{logo:''}//这样写是因为要provide和inject的响应。
    }
  },
   methods:{
    logo(){//url切割找出域名
      let href = window.location.href.split(".")[0];
      if(href.length===3){//这是自己的判断，因为我们目前就一个域名 一个二级域名，当域名长度是3的时候，肯定是二级域名
        console.log(1)
        let h = href.split("//")[1];
       this.imgUrl.logo= h;
      }else{
        this.imgUrl.logo= "默认logo名";
      }
    }
    },
    created() {
       this.logo();
    }

其他子组件
<template>
 <li class="logo"><router-link to="/"><img :src="require('../../assets/'+logo+'.png')" alt=""></router-link></li>
 动态绑定src，只会变化一个值。
</template>
export default {
    name: "LoginHead",
    components:{Foot,Register},
    inject:['imgUrl'],//接收app.vue的值
    computed:{
        logo(){
          return this.imgUrl.logo
        },
    },
  }

注：图片的名字一定要跟域名相同哦。

附带另一种思路。找出域名后，在一个组件中获取，不在app.vue中获取，然后将值存到vuex中，也是一个想法哦~

写代码的时候发现，还不是很了解provide/ inject，不说了，学习，人生路漫漫，学习无止境，啥也不是，散会。