zoukankan      html  css  js  c++  java
  • vue刷新页面及注意事项

    重新刷新当前页面

    1、路由重新导入当前页面(无效果)

    this.$router.push({name:'goodsList',params:{vid:vid}})
    
    但是:我们会发现用vue-router在当前页面再重定向路由到页面本身,就算改变id,页面也是不进行刷新的,这个方法无效
    

    2、强制刷新(体验差)

    页面会类似于ctrl+f5的那种刷新,会有一段时间的空白出现,用户体验很不好,不建议使用
    
    location. reload()
    或
    this.$router.go(0)
    

    3、provide/inject组合(推荐)

    1、修改App.vue,做以下修改
    
    <template>
        <div id="app">
            <router-view v-if="isRouterAlive"></router-view>
        </div>
    </template>
    
    <script>
    export default {
        provide() {
            return {
                reload: this.reload
            }
        },
        data() {
            return {
                isRouterAlive: true
            }
        },
        methods: {
            reload() {
                this.isRouterAlive = false
                this.$nextTick(function() {
                    this.isRouterAlive = true
                })
            },
        }
    }
    </script>
    
    
    
    2、通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了isRouterAlive来控制。
    在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后
    
    export default {
        inject: ['reload'],  //添加此行
        data(){}
    }
    
    
    
    3、通过调用 this.reload() 即可实现当前页面的快速刷新
    
    this.reload()  //调用此函数实现刷新
    

    实例:this.reload()配合watch监听路由变化,实现视频选集后刷新页面功能

    1、用户点击选集,携带当前选中的选集id跳转当前页面的路由

    2、实现方式

    注路由跳转后仍在本页面,仅路由所携带id发生改变

  • 相关阅读:
    Weex-语法笔记 一
    Entitlements (授权机制) 延伸
    FOUNDATION_EXPORT 延伸
    NS_ASSUME_NONNULL_BEGIN 延伸
    SSLPinning 延伸
    Socket.io 延伸
    UI_APPEARANCE_SELECTOR 延伸
    Modules和Autolinking
    代码块(Block)回调一般阐述
    数据库连接池配置错误导致OOM
  • 原文地址:https://www.cnblogs.com/huihuihero/p/14183507.html
Copyright © 2011-2022 走看看