采用了 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>