zoukankan      html  css  js  c++  java
  • ivew 【provide/inject] 页面刷新实现reload

    1.App.vue

    <template>
      <div id="app">
        <router-view v-if="isRouterAlive" />
    
      </div>
    </template>
    
    <script>
    
    export default {
      data(){
        return{
          isRouterAlive: true
        }
      },
    
      created () {
        console.log(this.$store.getters.menuList)
      },
      // 刷新页面
      methods:{
        reload () {
          this.isRouterAlive = false
          this.$nextTick(function () {
            this.isRouterAlive = true
          })
        }
      },
      name: 'App',
      provide () {
        return {
          reload: this.reload
        }
      },
    }
    </script>
    
    <style lang="less">
    .size {
       100%;
      height: 100%;
    }
    html,
    body {
      .size;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    #app {
      .size;
    }
    </style>
    1. 通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了
    2. 然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行

    4.子页面

     子页面

     5.刷新方法

     //刷新
           refresh() {
              this.reload();
           },
  • 相关阅读:
    Epoll技术深入学习
    nginx
    epoll案例
    Linux网络编程初步
    链表快速排序(已通过ACM在线评测)
    C++内存管理
    c++11并发语法初步
    数据库与SQL优化笔记(一)
    C++面向对象模型(虚表与虚表指针)
    c++的一些杂项
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/10908128.html
Copyright © 2011-2022 走看看