Nuxt.js中PC與移動端間自動識別跳轉
了解
官網(wǎng)類網(wǎng)站，需要考慮seo，使用了
nuxt.js的ssr開發(fā)。pc端和移動端分離了，相當于兩個獨立的項目，部署在同一個服務器上，綁定不同域名。
問題
需要判斷當前設備，在兩個端之前相互跳轉。
解決
根據(jù)瀏覽器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 = ...
}
}當然，這樣跳轉是可以了，但是問題也是一堆堆：
- 跳轉時間比較長（在
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加上對應配置：
router: {
middleware: 'midd'
},這樣的話在每個頁面渲染前都會調用midd.js，如果不需要每個頁面都判斷的話可以在需要判斷跳轉的頁面里面寫，然后把nuxt.config.js里面的去掉。
測試了一下，效果還不錯。響應速度很快。
還有一種想法沒有嘗試：把這個判斷、跳轉寫成plugin，在 nuxt.config.js里面掛載。( ps:寫的過程中想到的)
到此這篇關于Nuxt.js中PC與移動端間自動識別跳轉的文章就介紹到這了,更多相關Nuxt.js PC與移動端自動跳轉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文詳細介紹了通過js+plupload實現(xiàn)了繞過服務器，向又拍云批量上傳圖片的解決方法，十分的巧妙，也節(jié)省了服務器資源，這里推薦給有需要的小伙伴。2014-12-12
JavaScript實現(xiàn)SHA-1加密算法的方法
這篇文章主要介紹了JavaScript實現(xiàn)SHA-1加密算法的方法,實例分析了使用javascript實現(xiàn)SHA-1加密算法的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了javascript定時器完整實現(xiàn)方法,以實例形式分析了定時器的嵌套調用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
原型方法的不同寫法居然會影響調試的解決方法...2007-03-03
小程序內是不能直接分享到朋友圈的。所以只能通過生成圖片，攜帶小程序二維碼，保存到手機相冊，讓用戶自己選擇發(fā)到朋友圈。然后可以通過在小程序中識別二維碼來進入小程序的指定頁面。下面小編給大家分享實現(xiàn)代碼，需要的朋友參考下吧2018-05-05
javascript模擬鼠標點擊事件原理和實現(xiàn)方法
本文詳細介紹了JS模擬鼠標點擊事件的原理以及應用場景,并提供了模擬鼠標左鍵點擊事件、右鍵點擊事件、滾輪事件和移動事件的代碼實現(xiàn),了解JS模擬鼠標點擊事件的原理和實現(xiàn)方法對于開發(fā)人員非常重要,這對于許多面向用戶的web應用程序的開發(fā)和測試都具有很重要的意義2023-09-09
這篇文章主要介紹了兩個數(shù)組去重的JS代碼，有需要的朋友可以參考一下2013-12-12
JavaScript 用cloneNode方法克隆節(jié)點的代碼
很多時候我們需要通過HTML DOM 的方式，用JavaScript 動態(tài)生成很多相同的節(jié)點，包括其子節(jié)點2012-10-10
這篇文章主要介紹了JS原形與原型鏈,結合實例形式深入分析了JS原型鏈、繼承、組合繼承等相關原理、操作技巧及注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了利用原生JS實現(xiàn)歡樂水果機小游戲,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04