Vue项目实现首页刷新时随机加载不同.vue组件的方案咨询

方案1：路由层直接随机加载组件（改动量最小） #

直接修改路由配置的组件导入逻辑，路由匹配时直接随机返回对应组件，完全保留单一路由入口，无需修改其他业务代码：

{
  path: '/',
  name: 'home',
  component: () => {
    // 随机数范围可根据首页版本数量调整，要新增版本直接加判断分支即可
    const random = Math.random()
    return random < 0.5 ? import('./views/Home1.vue') : import('./views/Home2.vue')
  }
},

方案2：保留原Home.vue作为容器，内部做动态组件渲染 #

如果后续需要对所有首页版本做统一的埋点、权限判断等公共逻辑，推荐用这个方案，可扩展性更高：

1. 修改原Home.vue的代码，用Vue动态组件实现随机渲染：

<template>
  <component :is="randomHomeComponent" />
</template>

<script setup>
import { shallowRef } from 'vue'
// 导入所有首页组件
import Home1 from './Home1.vue'
import Home2 from './Home2.vue'

const homeComponentList = [Home1, Home2]
// 随机选取组件，shallowRef可以减少不必要的响应式开销
const randomHomeComponent = shallowRef(homeComponentList[Math.floor(Math.random() * homeComponentList.length)])
</script>

2. 原路由配置不需要做任何修改，保持指向Home.vue即可。

注：如果使用Vue2，只需将setup语法替换为对应的选项式写法，随机逻辑和动态组件用法完全通用。

• 扩展适配：如果需要实现同一个用户短时间内多次访问展示同一版本的效果，可将随机生成的结果存入localStorage/sessionStorage，首次访问生成随机值并存入缓存，后续访问优先读取缓存值即可。

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