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() // 监测到路由发生变化时调用   } },
  • 相关阅读:
    00-03.kaliLinux-vi粘贴复制功能配置
    00-02.kaliLinux-配置SSH服务
    00-01.Kali Linux 2020.1修改root用户密码
    Web设计色彩(转载)
    Inno Setup区段之Language篇
    Inno Setup区段之Setup篇
    IE无法获取到input框的值
    Inno Setup之常量篇
    Inno Setup之概念篇
    网络不通排查
  • 原文地址:https://www.cnblogs.com/xll-qg/p/8761067.html
Copyright © 2011-2022 走看看