小技巧-優(yōu)雅實(shí)現(xiàn)頁(yè)面刷新(vue)

第一時(shí)間關(guān)注技術(shù)干貨！

前幾天項(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)全局的刷新，局部刷新還是比較捉急。

嘗試

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')
}

橋梁文件

<script>
export default {
  beforeCreate() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render(h) {
    return h()
  }
}
</script>

更多文章https://clown-jack.github.io/