vue 點擊當前路由重新加載該路由

需求：點擊當前路由實現數據請求頁面刷新 -- router.push(當前路由)並不會執行

刷新頁面

1、window.reload()

2、this.$router.go(0)

 

但是這兩種刷新時，整個瀏覽器進行了重新加載，跳躍，不平滑，體驗不好

 

3、v-if ，控制router-view的顯示或隱藏，從而控制頁面的再次加載，

 

如果是菜單，感覺控制菜單顯隱不太好

 

4、借助第三方組件實現兩次路由跳轉

思路： 　　

　　1）判斷是否點擊的當前路由，如果是，則跳轉到空白的第三方組件，並傳遞當前路由。

　　2）在空白組件中 created 的生命周期中接受參數，並執行頁面跳轉，此時頁面不會顯示任何內容就開始進行跳轉，所以速度的問題不用擔心，視覺上的效果就是點擊當前路由后，頁面刷新請求數據。實際路由已經跳轉了兩次。

//菜單點擊的回調
handleSelect(key, keyPath) {
      if(key === this.$route.path){ // this.$router.go(0) // this.$router.push(key) this.$router.push({ path: 'black', query: key }) } }

// 空白模板 
<template>
  <div></div>
</template>
<script>
  export default { data() { return {}; }, created() { const path = this.$route.query; this.$router.push({ path }); } }; </script> <style> </style>

      console.log('設置或獲取對象指定的文件名或路徑               -- window.location.pathname---',   window.location.pathname);
      console.log('設置或獲取整個 URL 為字符串                   -- window.location.href--------', window.location.href); console.log('設置或獲取location或URL的hostname和port號碼 -- window.location.host-------', window.location.host); console.log('設置或獲取與 URL 關聯的端口號碼 -- window.location.port--------', window.location.port); console.log('設置或獲取 URL 的協議部分 -- window.location.protocol---', window.location.protocol); console.log('設置或獲取 href 屬性中在井號“#”后面的分段 -- window.location.hash-------', window.location.hash); console.log('設置或獲取 href 屬性中跟在問號后面的部分 -- window.location.search------', window.location.search); console.log('獲取當前網頁的域名 -- document.domain-------------', document.domain); console.log('獲取當前網頁的路由 --this.$route.path-------------', this.$route.path);