美文网首页
Vue this.route.push跳转页面不刷新

Vue this.route.push跳转页面不刷新

作者: 风赼 | 来源:发表于2020-03-28 14:13 被阅读0次

使用this.route.push跳转页面时数据没有刷新,我在网上查找到了几种方法:

1、使用activated():{}周期函数代替mounted():{}

当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

将请求数据的函数写在 activated():{},每次进入页面就能获取到最新数据。

activated ():{

    //this.getData()

}

2、watch监听路由,请求数据

watch: {

    '$route' (to, from) {

    //请求数据

    }

但是使用这个方法会请求两次数据。

3、watch监听路由,强制刷新

watch: {

    '$route'(to,from) {

        this.$router.go(0);

    }

}

使用该方法会导致页面有一段很长的白屏时间,用户体验感不好。

相关文章

  • Vue this.route.push跳转页面不刷新

    使用this.route.push跳转页面时数据没有刷新,我在网上查找到了几种方法: 1、使用activated(...

  • 解决vue路由跳转页面不刷新的问题

    解决vue路由跳转页面不刷新的问题 通过路由传参跳转界面,页面没有刷新解决方法:在 router-view 中加 ...

  • vue跳转局部页面切换

    vue在跳转的时候,让只切换想要的局部页面,而不是整个页面切换,比如A页面跳转到B页面,但是动态背景动画不刷新,只...

  • vue跳转当前页面页面不刷新问题

    vue跳转当前页面页面不刷新,导致切换角色的时候有些权限无法更新解决方法:1.router.go(0) 页面刷新 ...

  • Vue错误集

    vue-router使用hash模式时,页面点击跳转或者刷新正常.使用history模式时,页面点击跳转正常,刷新...

  • Vue 路由跳转相同路径页面不刷新

    Vue 路由跳转相同路径页面不刷新 vue 同一路由跳转不走生命周期,导致数据不更新不管是动态路由,还是传参 都不...

  • vue-router用法

    vue 路由 路由点击跳转不会页面刷新,可以保留数据 安装vue-router:npm install vue-r...

  • Vue路由this.$router.push跳转页面不刷新

    一、背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。也就是vue生命周期函数没...

  • 关于vue history模式下遇到的坑

    背景: vue-cli4 配置vue-router 为history模式 , 跳转子路由后页面正常,但是刷新页面访...

  • keepAlive使用方法

    vue单页面,多路由,前进刷新,后退不刷新 目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷...

网友评论

      本文标题:Vue this.route.push跳转页面不刷新

      本文链接:https://www.haomeiwen.com/subject/pwgjuhtx.html