Vue server rendering co-routing how to adapt to mobile and PC

what I"m doing now is, but by doing so, the front-end js will directly report an error:

export function createRouter () {

if (global.mobile) {
    return new Router({
      mode: "history",
      scrollBehavior: () => ({ y: 0 }),
      routes: [
        { path: "/", component: mobileIndex}
      ]
    })  
}else {
    return new Router({
      mode: "history",
      scrollBehavior: () => ({ y: 0 }),
      routes: [
        { path: "/", component: index }
      ]
    })  
   }
}

 var is_mobile = function (req) {
    var ua = req.get("User-Agent")
    return /Android|webOS|iPhone|iPod|BlackBerry/i.test(ua);
  }

  console.log("dasjka",req)
  if (is_mobile(req) === true) {
    global.mobile = true
  }else {
    global.mobile = false
  }
 }

I would like to know what the common practice in the industry will be? For example, I wrote two pages, a.vue and amurmobile.vue, how to control how to point to different page files under the same route http://a.com

.
May.08,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3db9b-2c3ad.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3db9b-2c3ad.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?