Question

我对Vue很陌生，正在创建一个可以在桌面和移动设备上使用的项目。

我正在使用 vue-router 来管理项目中的路由，并且我对某些页面有嵌套视图。

例如：

我有一个设置页面
此页面包含导航角色和2个子路线（例如帐户或偏好）
所以我有3个组件，一个Settings（执行 nav 并拥有router-view）。每个嵌套路线都有一个。

此处在我的router配置

中

{
    path: '/settings',
    name: 'settings',
    component: Settings,
    children: [
        {
            path: 'account',
            name: 'settings-account',
            component: Account
        },
        {
            path: 'preferences',
            name: 'settings-preferences',
            component: Preferences
        }
    ]
}

此处Settings.vue

<template>
    <nav>
        <!-- some router-link s -->
    </nav>
    <router-view></router-view>
</template>

我的问题是：当用户在桌面上时，router-view和nav位于相同的屏幕，这很好。

但是，当用户使用手机时，我想加载另一个完整页面，例如/settings/account，而不是将所有内容都放在同一个页面上。

像经典的主要细节流程一样。

我该如何实现？我应该声明另一个组件和其他路线，如

{
    path: '/settings/account',
    name: 'settings-account-mobile',
    component: SettingsAccount 
}

或者有更好的方法吗？

感谢您的任何建议

vue-router：移动设备上的嵌套路由

0 个答案: