Vue.js项目之登录注册查询功能

<template>
  <div class="headerContainer">
    <el-header>
      <!-- <el-span>基于二维码的商品管理系统</el-span> -->
      <!-- <el-button type="primary" plain>退出当前账号</el-button> -->
      <span class="monkeyImg">
        <img src="../assets/contactMe.png"/>
      </span>
      <span class="header_content">
        <el-input
        placeholder="请输入商品"
        prefix-icon="el-icon-search"
        v-model="input21"
        class="search_input"
        @keyup.enter.native="searchFun(input21)">
        </el-input>
        <router-link v-bind:to="link_login"  class="header_link">
          <span id="login" @click="routerFunLogin(text_welcome)" >{{text_welcome}}</span>
        </router-link>
        <router-link v-bind:to="link_register"  class="header_link">
          <span id="register" @click="routerFunRegister(text_register)">{{text_register}}</span>
        </router-link>
      </span>
    </el-header>
  </div>
</template>

<script>

export default {
  name:'Header',
  data(){
    // uname:''
    return{
      uname:'',
      text_welcome:"您好,请登录",
      text_register:"注册",
      link_login:"",
      link_register:"",
      input21:''
    }
  },
  mounted:function(){
      this.$nextTick(function(){
        this.uname=this.getCookie('uname');
        console.log(this.uname);
        if(this.uname!=="undefined"&&this.uname!==undefined){
          this.text_welcome="欢迎"+this.uname;
          this.text_register="个人中心";
        }
      })
  },
  methods:{
    getCookie(name){
      console.log("哈哈哈哈哈哈");
      var username=document.cookie.split(";")[0].split("=")[1];
      return username;

    },
    routerFunLogin:function(text_welcome){
      if(text_welcome=="您好,请登录"){
        this.link_login="/login";
      }else{
        this.link_login="/#";
      }
    },
    routerFunRegister:function(text_register){
      if(text_register=="注册"){
        this.link_register="/register";
      }else{
        this.link_register="/user_center"
      }
    },
    searchFun:function(value){
      let key;
      if(value=="百雀羚") key=1;
      else if(value=="香奈儿"||value=="channel") key=2;
      else key=3;

      console.log(document.URL);
      var url=document.URL;
      url=url.split("?")[0];
      console.log(url);
      if(url=="http://localhost:8080/#/product_list"){
        console.log("当前页面");
        console.log(key);
        window.location.reload();
        window.location.href="http://localhost:8080/#/product_list?
 key="+key;
      }else{
        window.location.href="http://localhost:8080/#/product_list?
   key="+key;
      }
    }
  }
}
</script>