html5 - How to adapt Vuejs server-side rendering and routing to mobile and PC

Question

My current approach is, but if I do this, 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 industry’s common practice will be like? For example, I have written two pages a.vue and a-mobile.vue. How can I control the same route http://a.com to point to different page files

Answer 1

Use iview or v-strap