Vue判斷裝置是移動端還是pc端
阿新 • • 發佈:2020-07-28
經常在專案中會有支援 pc 與手機端需求。並且pc與手機端是兩個不一樣的頁面。這時就要求判斷設定,根據不同的設定跳轉不同的路由。
直接上程式碼
//在 router/index.js 中有兩個頁面。 export default new Router({ mode: 'history', routes: [ { path: '', redirect: '/pc_index' }, { path: "/pc_index", // pc端首頁 name: PcIndex, component: PcIndex }, { path: '/m_index', // 手機端首頁 name: MIndex, component: MIndex } ] });
在 App.vue 的 mounted 方法中對設定進行判斷,如下:
//App.vue mounted() { if (this._isMobile()) { alert("手機端"); this.$router.replace('/m_index'); } else { alert("pc端"); this.$router.replace('/pc_index'); } }
其中 _isMobile() 方法如下:
//App.vue _isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) return flag; }
效果如下:
chrome 瀏覽器中 pc 模式下重新整理,顯示如下:
chrome 瀏覽器中 mobile 模式下重新整理,顯示如下: