Javascript 防止Vue.js呈现组件

我的情况是，我在桌面上有一个静态组件，它必须成为移动设备上的旋转木马。 由于seo，该组件呈现在服务器端，我使用

is=“my component”

在其上触发vue。通常，当我复制标记并签入断点时，我可以触发一些carousel构造函数。但是，如果将断点设置为桌面，vue仍将重新加载冗余组件

我知道有一种情况可能没有那么有效，但在我以前的项目中，由于vue，我有很多性能和解析问题，因此我需要从一开始就考虑性能

---

有没有可能以某种方式阻止在beforeCreate（）hook上进行渲染，但仍然能够在某些条件下使用它？

由于我已经阅读了您的评论，并且您希望使用其他不可用的内容，我只能考虑两种方法

1）如果您使用的是

vue路由器

，您可以运行make-use，它基本上是一个函数，可以返回

导入（“组件”）

（这是一个承诺）

MobileCarousel.ts

import { isMobile } from '@/utils/mediaQuery';

const MobileCarousel = (): Promise<Vue> | void => {
  if (!isMobile()) {
    return;
  }

  return import('@/components/MobileCarousel/MobileCarousel.vue');
};

export default MobileCarousel;

我对这种方法唯一关心的是服务器端渲染。由于我从未使用Vue进行过服务器端渲染，我无法向您保证它会像您期望的那样工作，您可以尝试一下。希望对你有帮助

---

2）除了使用延迟加载路径外，我相信一个只有在移动时才返回的Vue组件也可以用于您的情况。

为什么不使用

v-if

？不清楚您在问什么我现在使用

v-if

，但在vue解析模板之后仍然会触发。我的意思是防止在一些beforeCreate钩子上出现整个vue逻辑。你能展示一下代码吗？我还是不明白你的意思我真的很想知道答案。

import MobileCarousel from '@/components/MobileCarousel/MobileCarousel.ts';

...
{
  path: 'route-that-has-a-mobile-only-carousel',
  name: 'mobile-only-carousel',
  component: MobileCarousel,
},
enter code here