【vue页面，公共按钮，点击返回上一页】

一、问题：

当每个页面都需要一个返回按钮时，为了提高效率 ，可以在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;
	}

ending~