VUE識別訪問設備是pc端還是移動端的實現步驟
一、思路
有些網站需要區(qū)分手機端網頁和pc端網頁，做到不同設備訪問不同的網頁，增強用戶的使用體驗，可以在app.vue中作一個判斷（navigator.userAgent），然后跳轉不同的路由。
二、原理
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函數判斷是否有包含相應移動端設備名稱，從而實現區(qū)分兩者。
瀏覽器代號: navigator.appCodeName
瀏覽器名稱: navigator.appName
瀏覽器版本: navigator.appVersion
啟用Cookies: navigator.cookieEnabled
硬件平臺: navigator.platform
用戶代理: navigator.userAgent
用戶代理語言: navigator.language
三、步驟
1，先在router/index.js文件中配置好不同端口跳轉的路由：
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中做出判斷，并跳轉路由即可：
mounted () {
// 根據不同路由跳轉不同頁面
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
}
}四、結果
總結
到此這篇關于VUE識別訪問設備是pc端還是移動端的文章就介紹到這了,更多相關vue識別訪問設備內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue開發(fā)公共組件之返回頂部，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Vue3中使用defineCustomElement 定義組件詳解
這篇文章主要為大家介紹了Vue3中使用defineCustomElement 定義組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
vue中v-model如何綁定多循環(huán)表達式實戰(zhàn)案例
v-model綁定的變量無論是對象還是數組都是綁定的value值,下面這篇文章主要給大家介紹了關于vue中v-model如何綁定多循環(huán)表達式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了vue 請求后臺數據的實例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧、2017-06-06
el-date-picker日期時間選擇器的選擇時間限制到分鐘級別
文章介紹了如何使用el-date-picker 組件來限制用戶選擇的時間,禁止選擇當前時間的日期及時分,同時允許選擇其他日期的全天時分,通過設置 `pickerOptions` 對象的屬性,可以實現對日期和時間的精確控制,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要介紹了vue中$event使用之獲取當前元素及相關元素,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue+Video.js實現視頻抽幀并返回抽幀圖片Base64
這篇文章主要為大家詳細介紹了Vue如何利用Video.js實現視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2024-01-01
本文介紹了如何在Windows系統(tǒng)上安裝和配置Vue.js開發(fā)環(huán)境,包括安裝VS Code、Node.js、Vue CLI以及創(chuàng)建和啟動一個Vue項目2025-01-01
這篇文章主要為大家介紹了vue中v-if和v-show使用區(qū)別源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本篇文章主要介紹了VUE實現表單元素雙向綁定（總結） ，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08