vue.js项目中重新加载当前页面的方法

白俊遥博客

一.业务场景

1.在处理完编辑或者删除按钮时，需要有当前页面重新加载的需求。

二.解决方法

provide/inject的组件组合

具体使用方法:

1.在前端vue项目App.vue中添加如下代码

<template>
   <div id="app">
        <router-view v-if = "isRouterALive"/>
    <div>
  </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>


2.在index页面的使用：

        在页面注入App.vue组件提供（provide）的 reload 依赖，如下面代码块:inject:[‘reload’]。在逻辑完成之后（删除或添加…）,在methods中直接this.reload()调用，即可重新加载当前页面。

<script>
export default {
  name: 'index.vue',
  components:{xxx,xxx,xxx},
  inject: ['reload'],
  methods:{
getTableData:function(){
      this.reload()
 }
</script>


坚持学习，成就自我

白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论