vue router跳转页面后刷新 跳转后的页面

一、 背景

点击按钮跳转到新页面,刷新新页面。 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的。如果使用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载, 但是页面闪烁, 体验不好。

二、解决办法

使用:provide /inject 组合
作用是: 允许一个祖先组件向其所有子孙后代注入一个依赖, 无论组件层次有多深,并在其上下游关系成立时间里始终生效。

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>
 
<script>
export default{
  name: 'App',
  provide(){
    return{
        reload:this.reload
    }
  },
  data(){
      return {
        isRouterAlive:true,
      }
  },
  methods:{
    reload(){
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true
        });
    }
  }
}
</script>

新增配置:
在这里插入图片描述
触发跳转页
inject 放在 export default中
在这里插入图片描述
跳转方法中添加this.reload();
在这里插入图片描述

  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值