How can I disable back button on the browser with vue component?

Question

My vue component like this :

<template>
    <span class="rating">
        ...
    </span>
</template>
<script>
    export default {
        props: {
            'star': null
        }, 
        ...
    }
</script>

If the component is running I want to disable button back in the browser. So the user can not go back to the previous page

How can I do it?

Are you using vue-router? Because it has guards that can allow you to not let the user go back using the browser's back button. — Potray, Aug 07 '17 at 07:51
@Potray, It seems not. I just want to disable the button back on certain pages only. Not all pages — moses toh, Aug 07 '17 at 07:59
@SuccessMan how do you navigate to these components where you want to disable the back button...using `` or programmatic navigation? — Vamsi Krishna, Aug 07 '17 at 08:07
@Vamsi Krishna, In every browser there is a button back in the form of back icon. I want to disable it — moses toh, Aug 07 '17 at 08:12
@SuccessMan i understood that but disabling back button is not perfect ...see https://stackoverflow.com/questions/12381563/how-to-stop-browser-back-button-using-javascript insread you can use `replace` while navigation to these components so that the navigation will not leave a history record. — Vamsi Krishna, Aug 07 '17 at 08:15
You can't disable browser buttons, or any other buttons that not in your site. — Narek-T, Aug 07 '17 at 08:36

score 2 · Answer 1 · answered Jul 24 '20 at 07:34

2

Try this script, by adding in your html file, where you creat vue instance

history.pushState(null, null, location.href);
window.onpopstate = function () {
    history.go(1);
};

answered Jul 24 '20 at 07:34

Sachin Gadhari

51
4

score 1 · Answer 2 · answered Aug 07 '17 at 09:44

1

Run this code whenever url changes. It will counteract user's back action

window.history.forward(1)

answered Aug 07 '17 at 09:44

MingWen

1,203
2
9
5

How can I disable back button on the browser with vue component?

2 Answers2