vue-router 刷新当前路由

由于router-view是复用的,单纯的改变id号并不会刷新router-view

所以我们可以使用 watch 来监听路由的变化,然后先push一个空路由,再返回上一页,如下代码:

watch:{
        '$route': function (to, from) {
            let NewPage = '_empty' + '?time=' + new Date().getTime()/1000 //定义一个空页面
            this.$router.push(NewPage)
            this.$router.go(-1) // 返回上一个页面
        }  
    },

 还有另外一种方法,是从知友那找到的:(https://www.zhihu.com/question/49863095/answer/289157209)

利用v-if控制router-view,在路由容器组件,如APP.vue中实现一个刷新方法

1、用provide / inject来传递reload 在APP.vue里定义

<template>
  <router-view v-if="isRouterAlive"/> //路由做判断
</template>
<script>
export default {
 provide () { //父组件传值
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () { //定义更新方法
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    }
  }
}
</script>
在子组件中调用

inject: ['reload'], //子组件接受值 watch:{   '$route': function (to, from) {   this.reload() // 监测到路由发生变化时调用   } },

 

posted @ 2018-04-09 16:48  星空007  阅读(3045)  评论(0编辑  收藏  举报