vue中返回页面---公共组件 back.vue

1.html 

<template>
  <div class="back" @click="back">
    <img src="../../../static/img/back.png" alt />
  </div>
</template>

 2.js

（1）父页面 引入back页面 传值给子页面  父传子 

<template>
 <div class="container">
    <back :backData="backGo"></back>
 </div>
</template>

<script>
//引入模板
import back from '../../components/common/back.vue'

export default {
  components: {
    back,
  },
  data () {
    return {
      backGo: '', //传给子页面的值
         }
    }

</script>

（2）子页面 放在src<compent<back.vue 

<script>
export default {
  props: ["backData"],
  methods: {
    back () {
      if (this.backData === "") {
        if (this.$route.name === 'famousSide') {
          this.$router.push('/famous')
        }else {
          window.history.back()
        }
      } else if(this.backData === "exampage"){
          window.history.back()
             console.log(2)
      } else {
        eval(this.backData);
           console.log(3)
      }
    },
  }
};
</script>

<style scoped>
.back {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 40px;
  right: 90px;
  cursor: pointer;
  z-index: 1000000000000000;
}
.back > img{
  width: 100%;
  height: 100%;
}
.back:active {
  opacity: 0.5;
}
</style>