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发生改变

  • 相关阅读:
    C# 高效字符串连接 StringBuilder介绍
    C#图解教程
    C#中string类型是值类型还是引用类型?
    UML类图10分钟快速入门
    C#设计模式--单例模式
    计算机是如何启动的?
    2018年计划
    转:SQL进阶之变量、事务、存储过程与触发器
    2020/02/06,武汉
    2020/02/06,渐渐,from eason for you for her
  • 原文地址:https://www.cnblogs.com/huihuihero/p/14183507.html
Copyright © 2011-2022 走看看