Nuxt.js -- PC 與 移動端 間自動識別跳轉

瞭解

官網類網站，須要考慮seo，使用了 nuxt.js 的 ssr 開發。pc端和移動端分離了，至關於兩個獨立的項目，部署在同一個服務器上，綁定不一樣域名。

問題

須要判斷當前設備，在兩個端以前相互跳轉。

解決

根據瀏覽器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

對於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裏面掛載。( ps:寫的過程當中想到的)

end