Nuxt.js中PC與移動端間自動識別跳轉(zhuǎn)

更新時間：2022年03月18日 11:05:40 作者：沐夕花開

本文主要介紹了Nuxt.js中PC與移動端間自動識別跳轉(zhuǎn)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下

了解

官網(wǎng)類網(wǎng)站，需要考慮seo，使用了 nuxt.js 的 ssr 開發(fā)。pc端和移動端分離了，相當于兩個獨立的項目，部署在同一個服務(wù)器上，綁定不同域名。

問題

需要判斷當前設(shè)備，在兩個端之前相互跳轉(zhuǎn)。

解決

根據(jù)瀏覽器ua判斷當前是否為移動設(shè)備：

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 = ...
    }
}

當然，這樣跳轉(zhuǎn)是可以了，但是問題也是一堆堆：

跳轉(zhuǎn)時間比較長（在mounted前數(shù)據(jù)已經(jīng)請求了，頁面也渲染了，所以時間比較長）
有時會沒作用（不了解什么原因）

第二版：把這個操作移到 default.vue 的 updated 里面操作，但貌似沒什么作用。

第三版：使用 middleware

對于middleware，官網(wǎng)的簡介：

中間件允許您定義一個自定義函數(shù)運行在一個頁面或一組頁面渲染之前。

中間件執(zhí)行流程順序：

nuxt.config.js
匹配布局
匹配頁面

很好，在 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加上對應(yīng)配置：