快捷導(dǎo)航

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

更新時(shí)間：2022年03月18日 11:05:40 作者：沐夕花開(kāi)

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

了解

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

問(wèn)題

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

解決

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

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

因?yàn)榻佑|Nuxt.js時(shí)間不長(zhǎng)，也算不上深入。按直覺(jué)來(lái)吧：

第一版：在 default.vue里面 mounted 里面直接操作。

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

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

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

第二版：把這個(gè)操作移到 default.vue 的 updated 里面操作，但貌似沒(méi)什么作用。

第三版：使用 middleware

對(duì)于middleware，官網(wǎng)的簡(jiǎn)介：

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

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

nuxt.config.js
匹配布局
匹配頁(yè)面

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

router: {
    middleware: 'midd'
},

這樣的話在每個(gè)頁(yè)面渲染前都會(huì)調(diào)用midd.js，如果不需要每個(gè)頁(yè)面都判斷的話可以在需要判斷跳轉(zhuǎn)的頁(yè)面里面寫(xiě)，然后把nuxt.config.js里面的去掉。

測(cè)試了一下，效果還不錯(cuò)。響應(yīng)速度很快。

還有一種想法沒(méi)有嘗試：把這個(gè)判斷、跳轉(zhuǎn)寫(xiě)成plugin，在 nuxt.config.js里面掛載。( ps:寫(xiě)的過(guò)程中想到的)

到此這篇關(guān)于Nuxt.js中PC與移動(dòng)端間自動(dòng)識(shí)別跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)Nuxt.js PC與移動(dòng)端自動(dòng)跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: