如何将其他组件应用到Vue Router的一个路径
How to apply other components to one path of Vue Router
我正在使用 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
},
...
]
})
Vue 路由器 only allows one component per route。这是您的代码无法按预期工作的主要原因。
一个possible solution就是要有一个功能组件来嵌套这个逻辑：
export default {
functional: true,
render(h) {
return isMobile
? h('MobileSomeComponent')
: h('DesktopSomeComponent')
}
}
我正在使用 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
},
...
]
})
Vue 路由器 only allows one component per route。这是您的代码无法按预期工作的主要原因。
一个possible solution就是要有一个功能组件来嵌套这个逻辑：
export default {
functional: true,
render(h) {
return isMobile
? h('MobileSomeComponent')
: h('DesktopSomeComponent')
}
}