vue 判斷使用者處於手機還是PC

柠檬-不加糖發表於2024-04-17
Vue

第一種方法：路由跳轉不同頁面。 以下程式碼放在APP.Vue 檔案。每次進入頁面都會判斷使用者是處於 手機還是PC端。這裡需要建立倆個不同的路由，方便設定跳轉不同頁面。

mounted() {

    //根據不同路由跳轉不同頁面
    if( this.isMobile() ){
      console.log("手機端")
      this.$router.replace('/mbHome') // 手機路由
    }else{
      console.log("PC端")
      this.$router.replace('/pcHome') // PC路由
    }

  },
methods:{
    //該方法用於判斷是否進入手機端
    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
    }
  }

第二種方法，封裝一個公共方法，頁面引用JS去判斷頁面截留元件

API 底下建立一個JS 檔案

//該方法用於判斷是否進入手機端
export function 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 檔案裡面引入這個JS的方法，最後再去呼叫就行。

import { isMobile } from '@/api/common'
createFind(){
      this.find = isMobile()
    }

相關文章