VUE識別訪問設(shè)備是pc端還是移動端的實現(xiàn)步驟
一、思路
有些網(wǎng)站需要區(qū)分手機端網(wǎng)頁和pc端網(wǎng)頁，做到不同設(shè)備訪問不同的網(wǎng)頁，增強用戶的使用體驗，可以在app.vue中作一個判斷（navigator.userAgent），然后跳轉(zhuǎn)不同的路由。
二、原理
navigator.userAgent 屬性是一個只讀的字符串，聲明了瀏覽器用于 HTTP 請求的用戶代理頭的值。
例如：Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
然后通過match函數(shù)判斷是否有包含相應(yīng)移動端設(shè)備名稱，從而實現(xiàn)區(qū)分兩者。
瀏覽器代號: navigator.appCodeName
瀏覽器名稱: navigator.appName
瀏覽器版本: navigator.appVersion
啟用Cookies: navigator.cookieEnabled
硬件平臺: navigator.platform
用戶代理: navigator.userAgent
用戶代理語言: navigator.language
三、步驟
1，先在router/index.js文件中配置好不同端口跳轉(zhuǎn)的路由：
export default new Router({
routes: [
{
path: '',
redirect: '/pc_index'
},
{
path: "/pc_index", // pc端首頁
name: PcIndex,
component: PcIndex
},
{
path: '/mb_index', // 移動端首頁
name: MbIndex,
component: MbIndex
}
]
});2，在App.vue中做出判斷，并跳轉(zhuǎn)路由即可：
mounted () {
// 根據(jù)不同路由跳轉(zhuǎn)不同頁面
if (this._isMobile()) {
console.log('手機端')
this.$router.replace('/mb_index')
} else {
console.log('pc端')
this.$router.replace('/pc_index')
}
},
methods: {
// 判斷是否是手機端，如果是，返回true
_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
}
}四、結(jié)果
總結(jié)
到此這篇關(guān)于VUE識別訪問設(shè)備是pc端還是移動端的文章就介紹到這了,更多相關(guān)vue識別訪問設(shè)備內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決Vuepress碼云部署及自動跳轉(zhuǎn)404的問題
這篇文章主要介紹了解決Vuepress碼云部署及自動跳轉(zhuǎn)404的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
最近做項目遇到的一個功能,禁止用戶在輸入內(nèi)容的時候選擇今天以前的日期或者包含今日的日期,本文主要介紹了element?時間選擇器禁用選擇的使用示例,感興趣的可以了解一下2023-09-09
vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼
本篇文章主要介紹了vue2.0 better-scroll 實現(xiàn)移動端滑動的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2018-01-01
這篇文章主要給大家介紹了Vue項目中如何在父組件中直接調(diào)用子組件的方法,文章通過代碼示例介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關(guān)于vue中data改變后讓視圖同步更新的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了vue3?多種方法的錨點定位，使用?Vue?Router?導(dǎo)航守衛(wèi)可以簡化導(dǎo)航邏輯、統(tǒng)一管理導(dǎo)航邏輯和進行權(quán)限控制，但需要學(xué)習(xí)和理解相關(guān)概念，并且需要手動編寫和管理導(dǎo)航守衛(wèi)的邏輯,本文給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
vue中使用vue-seamless-scroll插件實現(xiàn)列表無縫滾動效果
這篇文章主要介紹了vue中使用vue-seamless-scroll插件無縫滾動,支持上下左右無縫滾動，單步滾動停留時間，以及水平方向的手動切換，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue中如何使用math.js問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了.html頁面引入vue并使用公共組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了VueJS實現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05