Nuxt.js — автоматическое определение переходов между ПК и мобильными устройствами

Nuxt.js

К пониманию

Официальный сайт, нужно учитывать сео, использоватьnuxt.jsизssrразработка. ПК и мобильные терминалы разделены, что эквивалентно двум независимым проектам, развернутым на одном сервере и привязанным к разным доменным именам.

вопрос

Нужно судить о текущем устройстве и прыгать друг на друга до двух концов.

решить

Определите, является ли текущее устройство мобильным устройством в соответствии с браузером UA:

let isMobile = (ua) => {
    return !!ua.match(/AppleWebKit.*Mobile.*/)
}

Поскольку знакомство с Nuxt.js непродолжительное, оно не глубокое. Следуйте своей интуиции:

Первое издание: вdefault.vueвmountedработать непосредственно внутри.

mounted(){
    if(process.browser){
        let ua = navigator.userAgent
        let isMobile = isMobile(ua)
        ...
        window.location.href = ...
    }
}

Конечно, этот прыжок в порядке, но проблем еще и куча:

  1. Время прыжка относительно велико (вmountedПредыдущие данные были запрошены, и страница тоже рендерится, поэтому долго)
  2. Иногда не работает (не знаю почему)

Второе издание: переместите эту операцию вdefault.vueизupdatedВнутри работает, но не работает.

Третье издание: использованиеmiddleware

Для промежуточного программного обеспечения введение официального сайта:

ПО промежуточного слоя позволяет определить пользовательскую функцию, которая будет выполняться перед визуализацией страницы или набора страниц.

Последовательность выполнения промежуточного ПО:

  1. nuxt.config.js
  2. соответствие макету
  3. соответствующая страница

очень хорошо вmiddlewareпод новымmidd.js:

export default function ({ isServer, req, redirect, route }) {
  let pcOrigin = 'http://localhost:3003'
  let mobileOrigin = 'http://localhost:3004'
  let isMobile = (ua) => {
    return !!ua.match(/AppleWebKit.*Mobile.*/)
  }
  let userAgent = req ? req.headers['user-agent'] : navigator.userAgent || ''
  return isMobile(userAgent) ? '' : redirect(pcOrigin + route.fullPath)
  // 使用redirect 重定向到外链需要加上前缀:http / https
}

затем вnuxt.config.jsДобавьте соответствующую конфигурацию:

router: {
    middleware: 'midd'
},

В этом случае он будет вызываться перед каждой отрисовкой страницы.midd.js, если не надо каждую страницу судить, то можно написать на той странице, которую нужно судить и прыгать, а потом ставитьnuxt.config.jsУдалите внутреннюю часть.

Проверил, эффект не плохой. Отзывчивость быстрая.

Есть еще не опробованная идея: написать это суждение и прыгать какplugin,существуетnuxt.config.jsмонтировать внутри. (пс: думал об этом в процессе написания)

end

Категории