vue 路由跳转页面数据不更新问题

伟笑

已于 2022-10-15 09:45:50 修改

阅读量8.5k

点赞数 6

分类专栏： Vue2 文章标签： vue.js

于 2022-04-29 10:25:01 首次发布

本文链接：https://blog.csdn.net/weixin_43045869/article/details/124490118

版权

21 篇文章 1 订阅

订阅专栏

由于 router-view 使用了 keep-alive组件，被缓存了。
原因：vue-router的切换不同于传统的页面切换，而是路
由之间的切换，其实就是组件之间的切换，引用相同组件的时候，会直接调用缓存而不会调用created()，mounted()函数。

解决方法:
第一种：在watch中监听路由变化，对router进行监控，当router发生变化时，执行初始化界面方法

//监听函数
watch: {
    '$route' () {
      this.initData();//我的初始化方法
    }
  },

第二种：给router-view添加唯一key
增加一个不同:key值，这样vue就会识别这是不同的了。

<router-view :key="key"></router-view>

  computed: {
    key() {
      return this.$route.path + Math.random();
    }
  },

第三种方法：使用生命周期函数：activated

activated() {
        this.getList()
    },

关注