Vue路由切换返回首页后侧边栏动态引入的图片丢失如何解决？

问题根因 #

你遇到的问题本质是打包工具对动态拼接路径的资源解析失效，路由切换后首页组件重新实例化时，无法通过拼接的require路径找到对应的打包后图片资源。

可行解决方案（按优先级从高到低） #

方案1：使用公共静态目录托管资源（兼容性最高，无路径解析问题）

把所有侧边栏图标迁移到项目的public/images/SidebarIcons目录下，直接通过绝对路径引用，不需要打包工具解析资源：

computed: {
  getImage() {
    return `/images/SidebarIcons/${this.type}.png`
  }
}

方案2：提前导入所有图标映射（适配Webpack/Vite所有环境）

提前把所有用到的侧边栏图标导入，建立type和图标的映射关系，完全避免动态路径解析：

// 提前导入所有侧边栏图标
import message from '@/assets/images/SidebarIcons/message.png'
import post from '@/assets/images/SidebarIcons/post.png'
import comment from '@/assets/images/SidebarIcons/comment.png'
// 其余所有用到的图标依次导入

const iconMap = {
  message,
  post,
  comment,
  // 你的facebookLightButtons、facebookButtons数组里的每个值都要在这里建立对应映射
}

export default {
  props: ['type'],
  computed: {
    getImage() {
      return iconMap[this.type]
    }
  }
}

方案3：调整动态导入写法

如果是Webpack环境，修改动态require的写法，明确告知webpack要扫描的资源目录：

computed: {
  getImage() {
    return require(`@/assets/images/SidebarIcons/${this.type}.png`)
  }
}

如果是Vite环境，替换require为Vite支持的URL导入语法：

computed: {
  getImage() {
    return new URL(`/src/assets/images/SidebarIcons/${this.type}.png`, import.meta.url).href
  }
}

额外补充：路由缓存配置

如果你希望首页组件不需要每次切换路由都重建，可以在路由出口位置配置keep-alive缓存首页：

<!-- 根组件的路由出口位置 -->
<keep-alive include="Home"> <!-- 这里的Home要和你的首页组件的name属性完全一致 -->
  <router-view />
</keep-alive>

内容的提问来源于stack exchange，提问作者Anson Savage