vue項(xiàng)目中路由跳轉(zhuǎn)頁面不變問題及解決
vue中路由跳轉(zhuǎn)頁面不變
問題
今天在開發(fā)vue移動端項(xiàng)目的過程中發(fā)現(xiàn)了一個bug，就是當(dāng)按返回鍵的時候頁面并沒有發(fā)生變化，一開始還以為是沒有監(jiān)聽到返回事件，但是通過測試之后發(fā)現(xiàn)返回事件監(jiān)聽成功了，路由也發(fā)生了變化，相應(yīng)事件也觸發(fā)了，就是頁面視圖沒有跟著改變。
解決方法
項(xiàng)目中路由設(shè)置的是 hash模式，所以對 hashchange 事件進(jìn)行監(jiān)聽（hash模式下，路由的變化會觸發(fā)hashchange事件）
在App.vue中給hashchange綁定事件：
?mounted() {
? ? // 檢測瀏覽器路由改變頁面不刷新問題,hash模式的工作原理是 hashchange事件
? ? window.addEventListener('hashchange', () => {
? ? let currentPath = window.location.hash.slice(1)
? ? if (this.$route.path !== currentPath) {
? ? ? this.$router.push(currentPath)
? ? }
? }, false)
}路由跳轉(zhuǎn)頁面不刷新、this.$router.go(-1)不生效
vue項(xiàng)目中遇見了這樣一個問題：使用this.$router.go(-1)回到上一頁，路由改變了，但是頁面展示還是停留在當(dāng)前頁面，需要手動刷新才能渲染跳轉(zhuǎn)后的頁面。
router-view 如下：
<router-view :key="$route.fullPath"></router-view>
一般情況用到上面這種寫法就能解決問題了，但是我這里還是不生效。
然后我就想到了如下方法：
解決思路
在beforeRouteEnter鉤子時，使用sessionStorage存儲from.path；然后在點(diǎn)擊返回的時候使用this.$router.push
代碼：
beforeRouteEnter(to, from, next) {
? ? next(()=> {
? ? ? window.sessionStorage.setItem('lasterRouter', from.path)
? ? })
? },//返回上一頁
this.$router.push(window.sessionStorage.getItem('lasterRouter'))以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天封裝一個導(dǎo)航欄的組件,使用的Element的NavMenu組件。遇到一個問題，本文主要介紹了Element el-menu中NavMenu的用法，感興趣的可以了解一下2023-04-04
解決在vue項(xiàng)目中,發(fā)版之后,背景圖片報(bào)錯,路徑不對的問題
下面小編就為大家分享一篇解決在vue項(xiàng)目中,發(fā)版之后,背景圖片報(bào)錯,路徑不對的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解Vue-Router源碼分析路由實(shí)現(xiàn)原理
這篇文章主要介紹了Vue-Router源碼分析路由實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
最近聽到有人提到了Vue2的functional組件,大致上是說這個東西沒有生命周期,在渲染層面上,會減少很多的消耗,一番處理之后,首屏?xí)r間和內(nèi)存都能減少不少,所以本文小編就來和大家聊聊Vue2中的functional組件<BR>2023-08-08
Vue+ElementUI?實(shí)現(xiàn)分頁功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁查詢-mysql數(shù)據(jù)，當(dāng)數(shù)據(jù)庫中數(shù)據(jù)比較多時,就每次只查詢一部分來緩解服務(wù)器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句，實(shí)現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實(shí)現(xiàn)過程,希望對大家學(xué)習(xí)有所幫助2021-12-12
vue計(jì)算屬性computed、事件、監(jiān)聽器watch的使用講解
今天小編就為大家分享一篇關(guān)于vue計(jì)算屬性computed、事件、監(jiān)聽器watch的使用講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
Vue使用extend動態(tài)創(chuàng)建組件的實(shí)現(xiàn)
本文主要介紹了Vue使用extend動態(tài)創(chuàng)建組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
element使用自定義icon圖標(biāo)的兩種解決方式
因?yàn)榘惭b原型圖設(shè)計(jì)實(shí)現(xiàn)頁面,在element自帶的圖標(biāo)庫好像沒有,所以按鈕的圖標(biāo)icon需要自定義,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的兩種解決方式,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue兼容ie9的問題全面解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
雖然Vue.js作為一個現(xiàn)代化的前端框架,鼓勵使用其自身的響應(yīng)式機(jī)制來處理DOM操作,但在某些情況下,尤其是在需要維護(hù)舊系統(tǒng)的項(xiàng)目中,可能會遇到需要引入jQuery的情況,本文將詳細(xì)講解如何在Vue項(xiàng)目中引入jQuery,需要的朋友可以參考下2024-09-09