zoukankan      html  css  js  c++  java
  • 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() // 监测到路由发生变化时调用   } },
  • 相关阅读:
    Iphone和iPad适配, 横竖屏
    JSONModel
    iPhone socket 编程之BSD Socket篇
    UIImageView 动画 / UIImage 方向
    iOS团队开发者测试
    xcode6以后, 使用.pch
    C# new override
    MVC, MVP, MVVM
    VS2010 VC Project的default Include设置
    centos 7 安装mysql5.6rpm格式197
  • 原文地址:https://www.cnblogs.com/xll-qg/p/8761067.html
Copyright © 2011-2022 走看看