Загрузить другой шаблон страницы для мобильного в nuxt - PullRequest
Новая
       96

Загрузить другой шаблон страницы для мобильного в nuxt

1 голос
/ 14 марта 2019

Я работаю над большим проектом и мне нужно создать отдельный 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-обнаружить вместо точек останова, но, поскольку маршрутизатор настроен перед тем, как войти в браузер, функция проверки вернет альтернативный вариант, поэтому он не сработал для меня.Кроме того, поскольку я буду использовать SSR, я избегаю таких вещей, как document.documentElement.clientWidth.

Короче говоря, мой вопрос: какова лучшая практика предоставления отдельных страниц пользователям мобильных устройств?

...