Home  >  Article  >  Web Front-end  >  How to prevent vue from returning to the previous page

How to prevent vue from returning to the previous page

藏色散人
藏色散人Original
2022-12-30 15:32:323445browse

Vue prohibits returning to the previous page: 1. Install "vue-prevent-browser-back" through the "npm install vue-prevent-browser-back --save" command; 2. Use "import" "preventBack from..." method is introduced separately; 3. By adding the "mixins: [preventBack]" statement, you can prohibit returning to the previous page.

How to prevent vue from returning to the previous page

#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

How to prevent return to the previous page in vue?

Simple method for Vue to prevent page rollback (applicable to browsers)

1. How to prevent page rollback?

After jumping to the page in VUE, there are many ways to prevent the page from returning. I will not list them all here. I use the vue-prevent-browser-back third-party library to prevent the page from returning. This The method is super easy to use.

2. Steps to use

1. Installation

The code is as follows:

npm install vue-prevent-browser-back --save

2.Introduction method

The code is as follows:

import preventBack from 'vue-prevent-browser-back';//组件内单独引入

3. Usage example

The code is as follows:


<script>
import preventBack from &amp;#39;vue-prevent-browser-back&amp;#39;;//组件内单独引入
export default {
    name: &#39;&#39;,
    props: {},
    mixins: [preventBack],//注入  阻止返回上一页
    components: {},
    data() {
        return {};
    },
    computed: {},
    watch: {},
    methods: {},
    created() {},
    mounted() {}
};
</script>

Summary

The above is today’s content, This article introduces the use of vue-prevent-browser-back. After introducing it into the component, add **mixins: [preventBack]** and it is completed. Is it simpler than other methods?

Recommended learning: "vue.js video tutorial"

The above is the detailed content of How to prevent vue from returning to the previous page. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:Can vue be adaptive?Next article:Can vue be adaptive?