zoukankan      html  css  js  c++  java
  • 如何让vue中router当前页面跳转并刷新、及页面跳转防闪屏

    导读: 在vue-router中,在当前页面中点击当前页面的路由,页面是不会进行刷新的,如何做到点击当前页面并进行刷新呢?

    解决方法:

    1. this.$router.go(0);

    2. location.reload()

    上两种方法 都会出现闪屏的问题 影响用户体验。如何做到页面刷新不闪屏呢?

    1. 用一个空页面做中转,空白页面再跳转回来,解决了闪屏的问题,但如果用户点击返回上一页便会出现问题,也不行

      终级解决

    2. 在App.vue,声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。(provide /inject )

      祖先组件(provide )会向其所有子孙后代(inject )注入一个依赖

      <template>
      	<div>
      		<!-- 绑定v-if -->    
        	<router-view v-if="routerState"></router-view>
        </div>
      </template>
      
      <script>
        export default {
          name: 'App',
          //向子组件注入依赖
          provide(){
            return{
              reload:this.reload
            }
          },
          //声明变量
          data(){
            return{
              routerState:true
            }
          },
          methods:{
            //利用$nextTick特性,router跳转完成后展示页面
            reload(){
              this.routerState = false;
              this.$nextTick(()=>{
                this.routerState = true;
              })
            }
          }
        }
      </script>
      

      在需要的页面 调用方法

      inject:["reload"],
      methods:{
        clickRouter(){
          this.$router.push('/test/id'=1);
          this.reload();
        }
      }
      
  • 相关阅读:
    HDU 1594 find the max
    mongoose 数据库操作2
    我也来开发2048之终极奥义
    cocos2d-x 2.2.0 怎样在lua中注冊回调函数给C++
    windows常用运行命令
    机器学习——Pandas库
    搭建靶场环境
    Ubuntu快速安装MSF
    docker 基本使用
    linux下杀死进程
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/13871559.html
Copyright © 2011-2022 走看看