• 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>
  • 相关阅读:
    Metasploit advanced命令使用技巧
    Metasploit命令info使用技巧
    Kali Linux 2020.1b发布了
    设置USB无线网卡为监听模式大学霸IT达人
    解决ifconfig命令未找到
    Metasploit新增技巧提示功能
    Wireshark运算符!=无法正常工作
    解决Kali Linux XFCE桌面Tab无法补全
    Nessus更新到8.9.1
    ASP入门(七)-Response小案例
  • 原文地址:https://www.cnblogs.com/rabbit-lin0903/p/14745097.html
Copyright © 2020-2023  润新知