1. Questions:
When each page needs a back button, in order to improve efficiency, you can write a public one on the App.vue page, so that it can be displayed on each page.
Second, the specific code:
1.html code:
<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 code:
//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 code:
.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;
}