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