小编Lup*_*lex的帖子

我正在处理一个更大的项目，需要在某些页面上为移动用户创建单独的 UX 。使用带有 CSS 的响应式布局不会削减它，而动态组件渲染会v-if导致可怕的模板。

这个答案是我最接近的答案，但我想避免手动定义路由，因为有大量页面。

我目前正在使用中间件根据用户代理检查进行重定向：

export default function(context) {
  if (context.isMobile) {
    if (context.route.fullPath.indexOf('/m') !== 0) {
      return context.redirect('/m' + context.route.fullPath)
    }
  }

  if (context.isDesktop) {
    if (context.route.fullPath.indexOf('/m') === 0) {
      return context.redirect(context.route.fullPath.substring(2))
    }
  }
}

但是我没有办法判断是否有移动版本，所以如果没有，就会显示错误页面。

我也尝试使用此答案，但使用nuxt-device-detect而不是断点，但由于路由器是在进入浏览器之前配置的，因此检查功能将返回回退选项，因此对我来说效果不佳。此外，由于我将使用 SSR，因此我避免使用document.documentElement.clientWidth.

我想简而言之，我的问题是：为移动用户提供单独页面的最佳实践是什么？