如何将其他组件应用于Vue路由器的一条路径

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路由器only allows one component per route。这是您的代码无法按预期运行的主要原因。

possible solution将具有一个功能组件来嵌套此逻辑：

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