此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true => false => false,就能实现页面刷新;
问题描述

路由
http://localhost:1221/newproduct?entityId=7B311104
点击div时,变为
http://localhost:1221/newproduct
页面不刷新
怎么办……
温馨提示,此方法适用vue 2.20+版本,请先查看你的vue版本
首先,找到自己的route-view

//mainfirem.vue

<template>
  <div class="os_container">
    <navbar></navbar>
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
import navbar from '@/components/navbar'
export default {
  name:'mainframe',
  provide(){
    return {
      reload:this.reload
    }
  },
  data () {
    return {
      isRouterAlive:true,
    }
  },
  components:{
    navbar,
  },
  methods:{
    reload(){
      this.isRouterAlive = false
      //在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
      this.$nextTick(()=>{
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style scoped lang="stylus">
</style>
<route-view>下显示的页面

//newProduct

export default {
  name: 'newproduct',
  inject:['reload'],
  method:{
    //点击div的时候,路由参数改变,
    //调用mainfirem.vue下的this.reload()方法,来改变v-if的状态
    clickDiv(){
      this.reload()
    }
  }

provide /inject 官网地址
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
end

Logo

前往低代码交流专区

更多推荐