如何在桌面上以模式打开路由但在 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 组件处理
• 关闭/打开将触发并通过更改查询参数进行管理

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