Vue實現刷新當前路由

Vue點擊當前路由實現刷新

Vue點擊當前路由實現刷新思路Code實現效果

前言：在后台管理系統中，有這樣一個需求點擊當前菜單欄時，頁面依舊可以刷新。

點擊當前路由實現數據請求頁面刷新

思路

點擊當前菜單欄時，因為要進行跳轉的路由和當前路由相同，所以router.push(當前路由)並不會執行。所以需要借由第三方組件來實現。

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

Code

//點擊路由進行跳轉操作
  jump(url) {
      //判斷是否是當前路由
      if(url == this.$route.path) {
          this.$router.push({
              path: 'redirect',
              query: rul
          })
      } else {
          this.$router.push({
          path: url
          })
      }
  }

 ​

空白組件：

<template>
    <div></div>
  </template>
  <script>
  export default {
    data() {
      return {
      }
    },
    created() {
      let url = this.$route.query;
      let str = '';
      for(let i in url) {
        str += url[i];
      }
      const path = this.$route.query;
      this.$router.push({
        path: str,
      });
    }  
  }
  </script>
  <style>
  </style>

實現效果