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();
        }
      }
      
  • 相关阅读:
    P1030 求先序排列 P1305 新二叉树
    spfa
    Clairewd’s message ekmp
    Cyclic Nacklace hdu3746 kmp 最小循环节
    P1233 木棍加工 dp LIS
    P1052 过河 线性dp 路径压缩
    Best Reward 拓展kmp
    Period kmp
    Substrings kmp
    Count the string kmp
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/13871559.html
Copyright © 2011-2022 走看看