<img
          src="../assets/person.png"
          @click="docs"
          style="float: right; padding-right: 3%"
        />

最简单的就是设定一个@click，给它一个名字，在script中进行方法定义 ，但这个跳转直接改变了url，只有父组件中保存的内容才会保留，比如提前设定的header

<script>
/* eslint-disable */
import AboutView from "../views/AboutView.vue";
import { Header } from 'mint-ui'
export default {
  name: 'Header',
  components: {AboutView,
    'mt-header': Header
  },
  data () {
    return {
    }
  },
  methods: {
    docs() {
      console.log("转到个人界面");
      this.$router.push("/AboutView");
    },
  },
}
</script>

<style scoped>
.mint-header{
    background-color: #fdfdff;
    color: #292828;
    font-size: 13px;
  }
img {
    border: 0px solid #ddd;
    width: 30px;
    height: 30px;
    position: relative;
    border-radius: 25px;
    padding: 4px;
}
</style>