Vue使用 vue-router路由跳转页面数据未更新

一鲸鱼

已于 2024-01-08 15:04:04 修改

阅读量1.2k

点赞数 11

文章标签： vue.js 前端 javascript

于 2024-01-08 15:01:45 首次发布

本文链接：https://blog.csdn.net/MaoObject/article/details/135457352

版权

本文讨论了VueRouter中keep-alive组件导致的组件缓存问题，介绍了如何在路由切换时更新数据的方法，包括使用生命周期函数`activated()`和监听$route变化。这两种策略需确保与methods同级实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先说一下结论：

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

跳转事件：

/**页面跳转 */
    warehouseArea(row){
      const id = row.id;
      this.$router.push({path:"页面路径",query: {id:id}})
    }

两种解决方式：

//方式一：生命周期函数
  activated() {
    this.getList()
  },
//方式二：监听route路径 函数
   watch: {
      '$route' () {
       this.getList();
      }
    }

需要注意以上两种方式需要和methods同级