一、问题:
当每个页面都需要一个返回按钮时,为了提高效率 ,可以在App.vue页面写一个公共的,这样就可以在每个页面显示了。
二、具体代码:
1.html代码:
<template>
<div id="app">
<!-- 1.当某一个页面不想引入这个公共组件,用v-show判断路由 -->
<div class="return_btn" @click="ruturnBtn()"
v-show="!(path ==='/pc_hospitalData') && !(path ==='/pc-headquarters')">
返回
</div>
</div>
</template>
2.js代码:
//2.当某一个页面不想引入这个公共组件
mounted() {
this.path = this.$route.path;
// console.log(this.$route.path)
},
watch: {
$route(to, from) {
this.path = to.path
}
},
//点击返回上一页(如果没有上一页,默认返回首页)
methods: {
ruturnBtn() {
if (window.history.length <= 1) {
this.$router.push({
path: '/'
})
return false
} else {
this.$router.go(-1)
}
},
}
3.css代码:
.return_btn {
width: 90px;
height: 90px;
border-radius: 50%;
background-color: #4C8CFD;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 999;
bottom: 150px;
right: 30px;
color: #fff;
font-size: 20px;
}