1. 程式人生 > >vue瀏覽器返回監聽

vue瀏覽器返回監聽

分享頁面時,希望點選瀏覽器回退按鈕,回到專案首頁,增加訪問量。

需要監聽瀏覽器的回退按鈕,並阻止其預設事件。

具體步驟如下:

1、掛載完成後,判斷瀏覽器是否支援popstate

mounted(){
  if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.goBack, false);
  }
},

2、頁面銷燬時,取消監聽。否則其他vue路由頁面也會被監聽

destroyed(){
  window.removeEventListener('popstate', this.goBack, false);
},

3、將監聽操作寫在methods裡面,removeEventListener取消監聽內容必須跟開啟監聽保持一致,所以函式拿到methods裡面寫

methods:{
  goBack(){
    this.$router.replace({path: '/'});
    //replace替換原路由,作用是避免回退死迴圈
  }
}

相關推薦

vue瀏覽器返回

分享頁面時,希望點選瀏覽器回退按鈕,回到專案首頁,增加訪問量。 需要監聽瀏覽器的回退按鈕,並阻止其預設事件。 具體步驟如下: 1、掛載完成後,判斷瀏覽器是否支援popstate mounted(){ if (window.history && wi

vue v-on事件

ood 語句 事件 targe vue blog count 內聯 tex 在html或jsp頁面中我們總能碰到監聽DOM事件來觸發javaScript代碼,下面我們就簡單聊聊Vue.js中的監聽事件是怎麽處理的。 在vue.js中監聽事件是通過v-on指令來實現的,先看一

關於vue中滾動失效問題

top scrolltop ont bsp .cn vue 資料 index document 在vue項目中, 監聽window滾動失效;並且document.body.scrollTop一直是0的情況! 查找了許多資料;並沒有找到合理的解決方案; 最中發現,在in

瀏覽器改變窗口大小時候的變化

doc 窗口 pan wid on() var html tel OS font_width(); $(window).on("resize", function(){   font_width(); }); function font_width (){   var c

vue 前端處理關鍵字搜索

後臺 vue this 技術 cti 請求 nbsp .net option 根據組件的業務需要,有時候搜索是把關鍵字返回給後臺,後臺處理後再把數據返回給前端渲染(多次請求服務器);有時候是前端把頁面的數據全部獲取下來,前端處理關鍵字的搜索(影響頁面加載) 我這個文章是介紹

Vue的watch事件

lln 觸發 doctype new mode last 變化 char ext Vue的watch監聽事件 相關Html: <!DOCTYPE html> <html lang="en"> <head> &l

vue利用watch路由變化

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <bod

Vue之資料存在的問題

Vue之資料監聽 當資料監聽的是列表時,資料發生改變,不會被監聽到。 // 用$set修改陣列中的陣列能夠被監聽 // app.$set(this.hobby, 0, "愛你哦"); <div id="app"> {{name}} <hr> {

為什麼Proxy可以優化vue的資料機制

我們首先來看vue2.x中的實現,為簡單起見,我們這裡不考慮多級巢狀,也不考慮陣列 vue2.x中的實現 其本質是new Watcher(data, key, callback)的方式,而在呼叫之前是先將data中的所有屬性轉化成可監聽的物件, 其主要就是利用Object.defineProperty,。

vue.js watchvue.js watch

vue.js watch監聽,vue.js 監聽watch     ================================ ©Copyright 蕃薯耀 2018年12月06日 http://fanshuyao.iteye.com/   <

Vue使用watch一個物件中的屬性

問題描述 Vue提供了一個watch方法可以讓使用者去監聽某些data內的資料變動,觸發相應的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', t

vue專案如何視窗變化,達到頁面自適應?

【自適應】向來是前端工程師需要解決的一大問題——即便作為當今非常火熱的vue框架,也無法擺脫——雖然elementui、iview等開源UI元件庫層出不窮,但官方庫畢竟不可能滿足全部需求,因此我們可以通過【監聽視窗變化】達到想要的絕大部分自適應效果。 獲取視窗寬度:document.body.clientW

vue之watch物件或者一個值時注意事項(深度觀察deep:true慎用!)

vue中想在某個值改變的時候能夠做一些其他事情,可以使用其提供的監聽機制,使用watch。注意,本篇不講技術問題,只是講解如何應用,因為筆者也是一個前端的小白 例:經手專案中就有使用,截圖如下: 下面來分析上面分別是怎樣實現監聽的: 其實除了畫紅線的地方,別的都沒什

vue 手機物理鍵+退出提示

直接上程式碼吧 <script> //Toast 這些都是在網上粘的別人的。但是找不到出處了,大佬見諒。 function Toast(msg,duration){ duration=isNaN(duration)?3000:duratio

vue 純js滾動條到底部

在網頁中,我們會遇到很多在滾動條到底部的時候有資料正在載入的事件,那麼怎樣用vue去實現這樣的內容呢?本篇只給出一個雛形,結合vue的生命週期用純javascript寫的一個監聽函式,後續操作資料庫的部分暫且不議。1、怎樣用純js判斷滾動條是否到底部?    先了解幾個關鍵詞

vue移動端滾動條高度的方法

這兩天做移動端專案遇到的問題,就是當滾動條下拉到一定的高度的時候,讓某個東西固定定位到頂部首先做的如何監聽滾動條的高度,下面是我寫的方法var _this =this window.addEventListener('scroll',function(){ var scrol

Vue 2.0 文字框內容變化及 ref的使用說明

<!DOCTYPE html><htmllang="en">    <head>        <metacharset="UTF-8">        <title>Title</title>     

vueのel-input回車鍵

<el-input v-model="result" @keyup.enter.native="onSubmit"></el-input> 加入 @keyup.enter.native 監聽回車鍵 onSubmit () { this.resul

Vue監聽器與濫用

問題 技術 rop pro 監聽器 mage userinfo get png 昨天工作的時候遇到了這麽一個問題 watch裏面是這麽寫的 然後想了想 id of null id?什麽id? 想了想 是prop嘛 就是userinfo 的id 沒有唄 為啥沒有 先

Vue檔案中input輸入事件v-on:input

原文地址:http://blog.csdn.net/JaneLittle/article/details/72742225 oninput 事件在使用者輸入時觸發,菜鳥教程中的用法是: 但是在.vue中這樣寫是沒有作用的: <input type="t