• 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();
           },
  • 相关阅读:
    利用dockerfile定制镜像
    发布Docker 镜像到dockerhub
    Docker 停止容器
    133. Clone Graph
    132. Palindrome Partitioning II
    131. Palindrome Partitioning
    130. Surrounded Regions
    129. Sum Root to Leaf Numbers
    128. Longest Consecutive Sequence
    127. Word Ladder
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/10908128.html
Copyright © 2020-2023  润新知