<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>Vue js go back to previous page</h2>
<button @click="goBack">Go Back</button>
</div>
<script type="module">
const app = new Vue({
el: "#app",
methods: {
goBack() {
window.history.back();
}
}
})
</script>
<style scoped>
#app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}
h2 {
font-size: 2rem;
margin-bottom: 2rem;
text-align: center;
color: #333;
}
button {
padding: 1rem 2rem;
border: none;
border-radius: 0.5rem;
background-color: #0077ff;
color: #fff;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1rem;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
button:hover {
background-color: #005ce6;
}
</style>
</body>
</html>