建站
咨詢
售后
建站咨詢
新聞中心
前幾天項(xiàng)目經(jīng)理提了個(gè)需求要實(shí)現(xiàn)點(diǎn)擊刷新按鈕實(shí)現(xiàn)頁(yè)面的局部刷新,刷新頁(yè)面使用谷歌的重新加載不是就可以了何必要去自己開(kāi)發(fā)呢?結(jié)果自己嘗試了一番發(fā)現(xiàn)只能實(shí)現(xiàn)全局的刷新，局部刷新還是比較捉急。
創(chuàng)新互聯(lián)建站是專業(yè)的梧州網(wǎng)站建設(shè)公司，梧州接單;提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行梧州網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
嘗試
push和replace這兩個(gè)都方法都是vue-router提供的api。
在vue項(xiàng)目中使用this.$router.push()方法來(lái)跳轉(zhuǎn)不同路徑,如果跳轉(zhuǎn)相同的路徑的話會(huì)發(fā)現(xiàn)頁(yè)面并沒(méi)有刷新，而是在histry棧中添加了一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的 URL。
使用this.$router.replace()方法報(bào)錯(cuò)vue-router.esm.js?8aaf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location這個(gè)是由于多次訪問(wèn)相同路由導(dǎo)致路由重復(fù)。
轉(zhuǎn)化
將要刷新的路由和刷新后的路由之間通過(guò)一個(gè)橋梁(作為過(guò)渡)來(lái)連接。
將路由的信息和參數(shù)全部都傳給"橋梁",當(dāng)其跳轉(zhuǎn)的一瞬間獲取到參數(shù)和路由信息跳轉(zhuǎn)到原來(lái)的路由。為了讓用戶無(wú)感知在跳轉(zhuǎn)"橋梁"路由的時(shí)候使用replace方法不會(huì)向history中添加新的記錄,在跳回原路由的時(shí)候是history方法，如果路由相同會(huì)替換之前的路由，而用戶在點(diǎn)擊瀏覽器回退按鈕的時(shí)候悄然不知做了什么。
- this.$router.replace({
- path: '/redirect' + fullpath
- })
配置路由信息
- {
- path: '/redirect/:path(.*)',
- component: () => import('@/views/redirect/index')
- }
橋梁文件
【編輯推薦】
- 涼涼，老板叫我開(kāi)發(fā)一個(gè)簡(jiǎn)單的工作流引擎...
- Windows10將迎來(lái)翻天覆地變化！今年第一個(gè)更新來(lái)了
- 2021年將迎來(lái)六大網(wǎng)絡(luò)安全趨勢(shì)
- Windows 10近年最大改進(jìn)！Windows10 21H2新特性搶先看
- 小愛(ài)同學(xué)竟然推出了PC版？帶你體驗(yàn)電腦版小愛(ài)
當(dāng)前標(biāo)題：小技巧-優(yōu)雅實(shí)現(xiàn)頁(yè)面刷新(vue)
本文來(lái)源：http://www.5511xx.com/article/copshcp.html
