如何使用 vue 组件禁用浏览器上的后退按钮？答案

【问题标题】：How can I disable back button on the browser with vue component?如何使用 vue 组件禁用浏览器上的后退按钮？
【发布时间】：2018-01-14 10:58:52
【问题描述】：

我的 vue 组件是这样的：

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

如果组件正在运行，我想在浏览器中禁用按钮。所以用户无法返回上一页

我该怎么做？

【问题讨论】：

你在用vue-router吗？因为它具有可以让您不让用户使用浏览器的后退按钮返回的守卫。
@Potray，似乎没有。我只想禁用某些页面上的按钮。并非所有页面
@SuccessMan 如何导航到要禁用后退按钮的这些组件...使用<router-link> 或编程导航？
@Vamsi Krishna，在每个浏览器中都有一个返回图标形式的返回按钮。我想禁用它
@SuccessMan 我明白，但禁用后退按钮并不完美......请参阅stackoverflow.com/questions/12381563/… insread，您可以在导航到这些组件时使用replace，这样导航就不会留下历史记录。

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

试试这个脚本，在你的 html 文件中添加你创建 vue 实例的地方

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

【讨论】：

【解决方案2】：

每当 url 更改时运行此代码。它将抵消用户的后退动作

window.history.forward(1)

【讨论】：