Nuxt.js中PC與移動(dòng)端間自動(dòng)識(shí)別跳轉(zhuǎn)
了解
官網(wǎng)類網(wǎng)站，需要考慮seo，使用了
nuxt.js的ssr開發(fā)。pc端和移動(dòng)端分離了，相當(dāng)于兩個(gè)獨(dú)立的項(xiàng)目，部署在同一個(gè)服務(wù)器上，綁定不同域名。
問題
需要判斷當(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í)間不長，也算不上深入。按直覺來吧：
第一版：在
default.vue里面mounted里面直接操作。
mounted(){
if(process.browser){
let ua = navigator.userAgent
let isMobile = isMobile(ua)
...
window.location.href = ...
}
}當(dāng)然，這樣跳轉(zhuǎn)是可以了，但是問題也是一堆堆：
- 跳轉(zhuǎn)時(shí)間比較長（在
mounted前數(shù)據(jù)已經(jīng)請(qǐng)求了，頁面也渲染了，所以時(shí)間比較長） - 有時(shí)會(huì)沒作用（不了解什么原因）
第二版：把這個(gè)操作移到
default.vue的updated里面操作，但貌似沒什么作用。
第三版：使用
middleware
對(duì)于middleware，官網(wǎng)的簡介：
中間件允許您定義一個(gè)自定義函數(shù)運(yùn)行在一個(gè)頁面或一組頁面渲染之前。
中間件執(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加上對(duì)應(yīng)配置：
router: {
middleware: 'midd'
},這樣的話在每個(gè)頁面渲染前都會(huì)調(diào)用midd.js，如果不需要每個(gè)頁面都判斷的話可以在需要判斷跳轉(zhuǎn)的頁面里面寫，然后把nuxt.config.js里面的去掉。
測試了一下，效果還不錯(cuò)。響應(yīng)速度很快。
還有一種想法沒有嘗試：把這個(gè)判斷、跳轉(zhuǎn)寫成plugin，在 nuxt.config.js里面掛載。( ps:寫的過程中想到的)
到此這篇關(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于HTML5上使用iScroll實(shí)現(xiàn)下拉刷新，上拉加載更多
本文主要介紹在HTML5中使用iScroll實(shí)現(xiàn)下拉刷新，上拉加載更多數(shù)據(jù)的方法，主要就是寫了兩個(gè)自定義函數(shù)pullDownAction和pullUpAction，分別在下拉和上拉的事件中調(diào)用他們。2016-05-05
javascript簡單計(jì)算器 可美化，需要的朋友可以測試下。參考下實(shí)現(xiàn)原理。2011-10-10
BootStrap Table對(duì)前臺(tái)頁面表格的支持實(shí)例講解
bootstrap-table是在bootstrap的基礎(chǔ)上面做了一些封裝，所以在使用bootstrap-table之前要導(dǎo)入的js和css，下面通過本文給大家詳細(xì)介紹需要引入的文件，對(duì)bootstrap table 表格感興趣的朋友一起看看吧2016-12-12
原始值代表原始數(shù)據(jù)類型的值,也叫基本數(shù)據(jù)類型,包括 Number、Stirng、Boolean、Null、Underfined,下面這篇文章主要給大家介紹了關(guān)于JavaScript中原始值和引用值深入講解的相關(guān)資料,需要的朋友可以參考下2022-10-10
JS高級(jí)拖動(dòng)技術(shù) setCapture，releaseCapture
setCapture 的意思就是設(shè)置一個(gè)對(duì)象的方法被觸發(fā)的范圍，或者作用域。2011-07-07
這篇文章主要針對(duì)javascript模塊化為大家進(jìn)行簡單解析，如何寫一個(gè)模塊，在頁面中加載模塊的方法，感興趣的小伙伴們可以參考一下2016-04-04
使用JavaScript實(shí)現(xiàn)頁面局部更新的方法總結(jié)
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一種用于在后臺(tái)與服務(wù)器進(jìn)行異步通信的技術(shù),本文給大家介紹了使用JavaScript實(shí)現(xiàn)頁面局部更新的三種方法,文中通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
JavaScript原型繼承_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript原型繼承的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Lombok的出現(xiàn)幫助開發(fā)人員在開發(fā)工程中消除了大部分冗余代碼:繁瑣的get、set方法甚至建造者模式，今天通過本文給大家分享Lombok實(shí)現(xiàn)方式JSR-269的相關(guān)知識(shí)，感興趣的朋友一起看看吧2021-06-06
這篇文章主要介紹了關(guān)于在 JavaScript 中如何讓 this 保持正確的指向的解決方案,文中給大家介紹了三種解決方案,使用閉包,使用箭頭函數(shù)和換綁 this這三種方法,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-01-01