[Vue.js] 라우트 웹/모바일 분기처리

* 해당 글은, vue.js 2.x 를 기준으로 작성되어 있음을 알려드립니다.

 

1. 라이브러리 설치

 

웹 브라우저로 접속시 PC와 모바일을 구분 할때 window.navigator.userAgent 를 통해,

충분히 순수 자바스크립트로 커스텀 함수를 만들어, 사용할 수도 있으나

npm 에 등록되어있는 편한 라이브러리가 있으므로 해당 라이브러리를 설치해줍니다.

 

npm i mobile-detect

 

 

2. 라우트 분기 처리 적용

 

우선, PC웹을 위한 컴포넌트와, 모바일을 위한 컴포넌트를 분리하여 구분이 쉽도록

네이밍을 서로 달리하여주도록 해주시는게 편합니다.

이때, path는 같아도 됩니다. 라우터를 모바일과 PC를 구분하여 제공해 주는 소스입니다.

 

import Vue from "vue";
import VueRouter from "vue-router";
import MobileDetect from 'mobile-detect'    //의존성 추가 필요
import wMain from "@/views/wMain";          // 웹용 컴포넌트
import mMain from "@/views/mMain";          // 모바일용 컴포넌트

Vue.use(VueRouter);

let w_routes = [
    {
        path: '/',
        component: wMain,
        name: 'wMain',
    },
];
let m_routes = [
    {
        path: '/',
        component: mMain,
        name: 'mMain',
    },
];

const W_Router = () => new VueRouter({
    mode: "history",
    routes: w_routes,
});

const M_Router = () => new VueRouter({
    mode: "history",
    routes: m_routes,
});

// 모바일 , PC 판단 및 라우터 처리
let router;
const md = new MobileDetect(window.navigator.userAgent); //mobile-detect를 통해
if (md.mobile()) {
    console.log("CONNECTION WITH MOBILE");
    router = M_Router();
} else {
    console.log("CONNECTION WITH PC");
    router = W_Router();
}

export default router;

 

위와 같은 간단한 로직으로, 라우터 두개를 선언하여 모바일 / PC를 구분하여

라우터를 손쉽게 분기처리 해줄 수 있습니다.