[[387299]]

前幾天項目經理提了個需求要實現點擊刷新按鈕實現頁面的局部刷新,刷新頁面使用谷歌的重新加載不是就可以了何必要去自己開發呢?結果自己嘗試了一番發現只能實現全局的刷新，局部刷新還是比較捉急。

嘗試

push和replace這兩個都方法都是vue-router提供的api。

在vue項目中使用this.$router.push()方法來跳轉不同路徑,如果跳轉相同的路徑的話會發現頁面并沒有刷新，而是在histry棧中添加了一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

使用this.$router.replace()方法報錯vue-router.esm.js?8aaf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location這個是由于多次訪問相同路由導致路由重復。

轉化

將要刷新的路由和刷新后的路由之間通過一個橋梁(作為過渡)來連接。

將路由的信息和參數全部都傳給"橋梁",當其跳轉的一瞬間獲取到參數和路由信息跳轉到原來的路由。為了讓用戶無感知在跳轉"橋梁"路由的時候使用replace方法不會向history中添加新的記錄,在跳回原路由的時候是history方法，如果路由相同會替換之前的路由，而用戶在點擊瀏覽器回退按鈕的時候悄然不知做了什么。

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> 

 【編輯推薦】