如何在桌面上以模态方式打开路由，但在 Nuxt 中以移动方式打开页面

Question

我正在使用 @nuxtjs/router 模块来定义自定义路由。这是我的 router.js 文件

import Vue from 'vue'
import Router from 'vue-router'

import News from '~/pages/News'
import Login from '~/pages/auth/Login'
import Signup from '~/pages/auth/Signup'
import Account from '~/pages/Account'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'Index',
        component: News,
      },
      {
        path: '/news',
        name: 'News',
        component: News,
      },
      {
        path: '/news/:tag',
        name: 'TaggedNews',
        component: News,
      },
      {
        path: '/news/:id([a-f0-9]{32})/:title',
        name: 'NewsItem',
        component: News,
      },
      {
        path: '/news/:tag/:id([a-f0-9]{32})/:title',
        name: 'TaggedNewsItem',
        component: News,
      },
      {
        path: '/login',
        component: Login,
      },
      {
        path: '/signup',
        component: Signup,
      },
      {
        path: '/account',
        component: Account,
      },
    ],
  })
}

我想打开 /login 路由 作为桌面模式但在移动设备上的页面。我该怎么做？

Answer 1

简短的回答是你不能，至于使用模式，你需要告诉应用程序你在什么“实际路线”上 - 想象直接导航到桌面上的 /login 并且问题变得清楚.

我的建议是不添加登录路由，而是使用查询参数来确定是否应显示登录模式：

查询参数将由应用程序根目录中的 LoginModal 组件处理
closing/opening 将通过查询参数的更改触发和管理

在移动设备上，模式可以设置为全屏块。

如何在桌面上以模态方式打开路由，但在 Nuxt 中以移动方式打开页面

How to open route as modal on Desktop but page on mobile in Nuxt

modal-dialog

vue.js

vue-router

vuejs2

nuxt.js