vue 點擊左側相同菜單，再次刷新頁面

采用了 vue  provide 和 inject 方法

1、在右側展示頁面的地方添加v-if 來控制其重新加載

<div class="main-wrapper" :class="$store.state.sidebarFold ? 'site-content-fold':''">
          <mainContent v-if="isRouterAlive"/>
      </div>

2、同時在本vue文件內注冊重新加載方法

<script>
import mainSidebar from '@/components/layout/sidebar'
import mainNavbar from '@/components/layout/navbar'
import mainContent from '@/components/layout/bizContent'
import {ref, provide,nextTick} from 'vue'
export default {
  components:{
      mainSidebar,
      mainNavbar,
      mainContent
  },
  setup(){
    // ページを更新します
    const isRouterAlive = ref(true)
    const onRefresh = () => {
      isRouterAlive.value = false
      nextTick(() => {
        isRouterAlive.value = true
      })
    }
    provide('reload',onRefresh)
    return{
      isRouterAlive,
      onRefresh
    }
    
  }
}
</script>

3、 在點擊相同菜單時候，去重新加載該頁面

<script>
import {useRouter,useRoute} from 'vue-router'
import {inject} from 'vue'
export default {
    // name: 'MenuTree',
    props: ['menu'],
    setup(props){
      const route = useRouter()
      const routeObj = useRoute()
      const onRefresh = inject('reload')
      const handleRoute = (menu) => {
        route.replace({ path : menu.url})
        if (menu.name == routeObj.name){
          onRefresh()
        }
      }
      return{
        props,
        handleRoute
      }
    }
}

</script>