美文网首页
使用vue开发--刷新局部页面

使用vue开发--刷新局部页面

作者: monkeyfly36 | 来源:发表于2018-12-14 20:08 被阅读0次

场景:

采用vue-router中this.router.push(),页面不会刷新; 若采用window.reload(),或this.router.go(0)刷新时,整个浏览器会重新加载,体验不好

解决方案:

provide / inject 组合

App.vue

<template>
    <router-view v-if="isRouterAlive"/>
</template>

<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function(){
        this.isRouterAlive = true
      })
    }
  }
}
</script>

index.vue(使用组件)

export default {
  inject: ['reload'],
  methods: {
    refreshTable () {
      this.reload()
    }
  }
}

相关文章

  • 使用vue开发--刷新局部页面

    场景: 采用vue-router中this.router.go(0)刷新时,整个浏览器会重新加载,体验不好 解决方...

  • vuejs入门-子路由(三)

    上次说了整页导航,这次我们说页面局部导航局部导航白话就是:页面局部刷新或是视图局部刷新 1.搭建项目:vue in...

  • Vue实现页面的局部

    这边使用的是Vue中的provide+inject来实现页面的局部刷新 1. 首先是修改App.vue文件 2. ...

  • 使用jquery刷新当前页面

    如何使用jquery刷新当前页面 div的局部刷新 $(".dl").load(location.href+" ....

  • Vue路由this.$router.push跳转页面不刷新

    一、背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。也就是vue生命周期函数没...

  • VUE04

    局部过滤器和局部自定义指令 组件生命周期 路由 在一个系统中会由很多页面组成,在Vue开发中这些页面通常使用的是V...

  • BootStrap学习

    今日任务 使用JQuery发送请求局部刷新页面 使用BootStrap制作一个响应式的页面 使用BootStrap...

  • 04、Vue-项目准备《饿了吗》

    *** 《饿了吗》外卖商家页面*** 一、项目需求分析 SPA(单页面开发): 快、局部刷新、减少请求大小、体验有...

  • 04、Vue-项目准备《饿了吗》

    *** 《饿了吗》外卖商家页面*** 一、项目需求分析 SPA(单页面开发): 快、局部刷新、减少请求大小、体验有...

  • Vue错误集

    vue-router使用hash模式时,页面点击跳转或者刷新正常.使用history模式时,页面点击跳转正常,刷新...

网友评论

      本文标题:使用vue开发--刷新局部页面

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