Vue跳转回首页后，如何强制组件读取更新后的local storage？

问题根源 #

Vue Router默认会复用同一路由对应的组件，所以从选择页跳转回首页时，首页组件的created/mounted钩子不会重新触发，导致没有读取localStorage里的新值，图片自然不会更新。

可行解决方案 #

方案1：在首页组件监听路由变化 #

在首页组件中通过路由守卫或watch监听路由跳转事件，当回到首页时重新读取localStorage：

方法A：使用beforeRouteUpdate路由守卫

// 首页组件的script部分
export default {
  data() {
    return {
      currentImage: ''
    }
  },
  // 路由更新前触发，适配同路由复用场景
  beforeRouteUpdate(to, from, next) {
    if (to.path === '/home') {
      this.loadImageFromLocalStorage()
    }
    next() // 必须调用next()继续路由流程
  },
  mounted() {
    this.loadImageFromLocalStorage()
  },
  methods: {
    loadImageFromLocalStorage() {
      // 读取localStorage并更新图片变量
      this.currentImage = localStorage.getItem('selectedImage') || '默认图片的路径'
    }
  }
}

方法B：监听$route变化

// 首页组件的script部分
export default {
  data() {
    return {
      currentImage: ''
    }
  },
  mounted() {
    this.loadImageFromLocalStorage()
  },
  watch: {
    // 监听路由对象变化
    '$route'(to) {
      if (to.path === '/home') {
        this.loadImageFromLocalStorage()
      }
    }
  },
  methods: {
    loadImageFromLocalStorage() {
      this.currentImage = localStorage.getItem('selectedImage') || '默认图片的路径'
    }
  }
}

方案2：给根路由视图添加key强制重新渲染 #

在Quasar的布局组件（比如layouts/MainLayout.vue）中，给<router-view>绑定key为$route.fullPath，这样每次路由变化（包括跳回同一路由）都会强制销毁并重建组件，触发mounted钩子重新读取localStorage：

<!-- MainLayout.vue 中的路由视图部分 -->
<router-view :key="$route.fullPath" />

这个方法最简单，不需要修改首页组件逻辑，适合快速解决问题。

方案3：跳转时带随机参数触发更新（hack式） #

在选择组件跳转时，给首页路由添加一个随机查询参数，让Vue认为是新的路由导航，从而触发组件更新：

// 选择组件中的跳转代码
this.$router.push({ 
  path: '/home', 
  query: { refreshToken: Date.now() } // 用时间戳做随机参数
})

然后在首页组件中监听query的变化，重新读取localStorage：

// 首页组件的script部分
export default {
  data() {
    return {
      currentImage: ''
    }
  },
  mounted() {
    this.loadImageFromLocalStorage()
  },
  watch: {
    '$route.query'() {
      this.loadImageFromLocalStorage()
    }
  },
  methods: {
    loadImageFromLocalStorage() {
      this.currentImage = localStorage.getItem('selectedImage') || '默认图片的路径'
    }
  }
}

补充说明 #

你之前尝试的<route-viewer>是笔误，正确标签是<router-view>，且key需要绑定在根路由视图上，而非包裹按钮，这样才能作用到所有路由组件。

内容的提问来源于stack exchange，提问作者Paul Carlson