美文网首页
vue功能实现一:重载页面

vue功能实现一:重载页面

作者: 冰Q | 来源:发表于2019-06-17 17:23 被阅读0次

    全部的,请看https://www.jianshu.com/p/93281f5c2b38

    重载页面(最简单方法,直接在入口文件APP.vue处处理)

    全局引用,不需要针对个别页面处理,简化开发工作量

    • 添加state
    const state = {
        isReload: false, // 是否需要重加载页面组件
    }
    
    • 创建mutation方法
    // 是否需要重载
    [IS_RELOAD](state) {
        state.isReload = !state.isReload;
    }
    
    • 在入口处设置激活组件
    <router-view class='router-view' v-if="isRouterAlive"></router-view>
    // 设置data数据
    isRouterAlive: true
    // watch监听isReload状态
    isReload(value) {
      // 一旦发生变化则重载组件
        this.isRouterAlive = false;
        this.$nextTick(() => {
          this.isRouterAlive = true;
        })
    }
    
    • 通过改变isReload状态来实现重载页面
    this.$store.commit('IS_RELOAD');
    

    相关文章

      网友评论

          本文标题:vue功能实现一:重载页面

          本文链接:https://www.haomeiwen.com/subject/rprzfctx.html