Как применить другие компоненты к одному пути Vue Router

Question

Я использую Nuxt. С помощью одного пути я хочу проверить мобильный и применить различные компоненты. (Я использую пользовательский Router.js и установил 'nuxt-device-detect')

Например:

javascript import DesktopSomeComponent from '~/pages/desktop/some' import MobileSomeComponent from '~/pages/moile/some' export function createRouter() { return new Router({ mode: 'history', routes: [ { path: '/', component: isMobile ? MobileSomeComponent : DesktopSomeComponent }, ... ] })

Answer 1

Vue-router допускает только один компонент на маршрут. Это основная причина того, что ваш код работает не так, как задумано.

Возможное решение состоит в том, чтобы иметь функциональный компонент для вложения этой логики:

export default {
  functional: true,
  render(h) {
    return isMobile 
    ? h('MobileSomeComponent')
    : h('DesktopSomeComponent')
  }
}