element-admin 點擊側邊欄刷新當前路由

需求：點擊左菜單刷新當前路由頁面。

經過查詢資料，找到兩種實現方式

第1種：在路由後面加上時間戳，經過不斷改變 url 的 query 來觸發 view 的變化，監聽側邊欄每一個 link 的 click 事件，每次點擊都給 router push 一個不同的 query 來確保會從新刷新 view。

// 路徑地址： src\views\layout\components\Sidebar\Link.vue
export default {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  methods: {
    testClick(url) {
      sessionStorage.setItem('defaultActive', JSON.stringify(url))
      // 經過時間戳實現菜單刷新
      this.$router.push({
        path: url,
        query: {
          t: +new Date() // 保證每次點擊路由的query項都是不同的，確保會從新刷新view
        }
      })
    },
    linkProps(url) {
      return {
        is: 'div'
      }
    }
  }
}

存在問題：點擊後路由後面都加了一串時間戳致使累贅，另外雖然模擬了刷新了當前頁面，但實際並無從新請求接口

第2種，花褲衩提供的方法，建立一個空的Redirect頁面，經過判斷當前點擊的菜單路由和當前的路由是否一致，一致的時候，會先跳轉到專門 Redirect 的頁面，而後將路由重定向到我想去的頁面，這樣就起到了刷新的效果了。展現方式如圖1

 

//  1.  src\utils\request.js  首先添加路由
{
    path: '/redirect', // 重定向路由
    // component: () => import('@/views/layout/components/Sidebar/redirect'), hidden: true
    component: Layout,
    hidden: true,
    children: [{
      path: '',
      component: () => import('@/views/layout/components/Sidebar/redirect')
    }]
},



//  2.  src\views\layout\components\Sidebar\redirect.vue 添加以下代碼 進行重定向
<script>
export default {
  beforeCreate() {
    const { query } = this.$route
    const path = query.path
    this.$router.replace({ path: path })
  },
  mounted() {},
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>



//  3.  src\views\layout\components\Sidebar\Link.vue 菜單頁面添加以下代碼 進行跳轉 

<template>
  <!-- eslint-disable vue/require-component-is -->
  <component v-bind="linkProps(to)" @click="testClick(to)">
    <slot/>
  </component>
</template>

<script>
// import { isExternal } from '@/utils/validate'

export default {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  methods: {
    testClick(url) {
      // 經過重定向空白路由頁面實現當前菜單刷新
      if (JSON.parse(sessionStorage.getItem('defaultActive')) === url) {
        // 點擊的是當前路由 手動重定向頁面到 '/redirect' 頁面
        sessionStorage.setItem('defaultActive', JSON.stringify(url))
        const fullPath = encodeURI(url)
        this.$router.replace({
          path: '/redirect',
          query: {
            path: encodeURI(fullPath)
          }
        })
      } else {
        sessionStorage.setItem('defaultActive', JSON.stringify(url))
        // 正常跳轉
        this.$router.push({
          path: url
        })
      }
    },
    linkProps(url) {
      return {
        is: 'div'
      }
    }
  }
}
</script>

如上，便可實現點擊當前菜單實現頁面刷新，兩種方案各有利弊，各位小夥伴若有更好的實現方式歡迎留言和私信。

參考：手摸手，帶你用vue擼後臺 系列五(v4.0新版本)