本教程操作環境:Windows10系統、Vue 3版、Dell G3電腦。
vue怎么禁止返回到上一頁?
Vue阻止頁面回退簡單方法(瀏覽器適用)
(相關資料圖)
一、如何阻止頁面回退?
VUE中跳轉頁面后,阻止返回的方法有很多種,這里就不一一列舉,我是用vue-prevent-browser-back第三方庫來阻止頁面返回,這個方法使用起來超級方便。
二、使用步驟
1.安裝
代碼如下:
npm install vue-prevent-browser-back --save
2.引入方式
代碼如下:
import preventBack from "vue-prevent-browser-back";//組件內單獨引入
3.使用實例
代碼如下:
<template> <div class="container"> <div class="container-text"> <p>禁止返回上級頁面!</p> </div> </div></template><script>import preventBack from "vue-prevent-browser-back";//組件內單獨引入export default { name: "", props: {}, mixins: [preventBack],//注入 阻止返回上一頁 components: {}, data() { return {}; }, computed: {}, watch: {}, methods: {}, created() {}, mounted() {}};</script>
總結
以上就是今天的內容,本文介紹了vue-prevent-browser-back的使用,在組件內引入后加入**mixins: [preventBack]**就完成了,是不是比其他方法更簡單呢。
推薦學習:《vue.js視頻教程》
以上就是vue怎么禁止返回到上一頁的詳細內容,更多請關注php中文網其它相關文章!
關鍵詞: