element-admin 点击侧边栏刷新当前路由

// 路径地址： 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‘
      }
    }
  }
}

//  1.  src\router\index.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>