一、思路
有些網(wǎng)站需要區(qū)分手機端網(wǎng)頁和pc端網(wǎng)頁，做到不同設備訪問不同的網(wǎng)頁，增強用戶的使用體驗，可以在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函數(shù)判斷是否有包含相應移動端設備名稱，從而實現(xiàn)區(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 () {
// 根據(jù)不同路由跳轉不同頁面
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
}
}四、結果?
文章來源：http://www.zghlxwxcb.cn/news/detail-454259.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-454259.html
到了這里，關于VUE識別訪問設備是pc端還是移動端的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![PC電腦技巧[筆記本通過網(wǎng)線訪問設備CMW500]](https://imgs.yssmx.com/Uploads/2024/04/856074-1.png)
