需求

新建和编辑都在同一个页面，当新建完成之后，弹出提示并刷新页面，获取后台的数据并在页面回显，当再次点击保存时，向后台多传一个参数ID。

解决方式

方式一、最简单的方式

无论是标签方式的跳转还是js方式的跳转都可以
加一个参数时间戳，同时监听路由变化，重新调用所有方法

query:{ time: new Date().getTime() }

watch:{
  $route(to,from){
    this.reload()
  }
},

方式二

重新加载页面，会有短暂的空白，用户体验不好

window.location.reload()

this.$router.go(0)

方式三

新建一个空白文件，先跳转空白页，再跳转回来。地址栏会有短暂的切换，但没什么影响。

需要刷新的页面

this.$router.replace({
  path: '/white'
});

空白页面

export default {
    name: "white",
    data () {
      this.$router.replace({
        path: '/index'
      })
      return {}
    }
}

方式四

重新渲染<router-view></router-view>

provide：全局注册方法；

inject：子组件引用 provide 注册的方法；

App.vue

<template>
  <div id="app">
    <router-view v-if="isReload"></router-view>
  </div>
</template>

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

需要刷新的页面

inject: ['reload'],
data () {
  return {

  }
},
methods: {
  refresh () {
    this.reload()
  }
},

网站导航

网站导航