如何在Nuxt中让/login路由桌面端以模态框打开、移动端以页面打开

这个需求我之前在项目里刚好做过类似的实现，核心思路是复用Login组件同时支持页面和模态框两种模式，再结合路由守卫与设备判断来处理不同终端的跳转逻辑，具体步骤如下：

1. 改造Login组件，支持双模式 #

让Login组件通过props来切换“页面模式”和“模态框模式”，这样我们不用写两个重复的组件：

<template>
  <!-- 模态框模式 -->
  <div v-if="isModal" class="login-modal-overlay">
    <div class="login-modal">
      <button class="modal-close-btn" @click="$emit('close')">×</button>
      <!-- 你的登录表单内容 -->
      <h2>登录</h2>
      <form>
        <!-- 表单元素 -->
      </form>
    </div>
  </div>
  
  <!-- 页面模式 -->
  <div v-else class="login-page">
    <h2>登录</h2>
    <form>
      <!-- 和模态框里一样的表单内容 -->
    </form>
  </div>
</template>

<script>
export default {
  props: {
    isModal: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.login-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.login-modal {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

.login-page {
  max-width: 400px;
  margin: 2rem auto;
  padding: 0 1rem;
}
</style>

2. 在全局布局中添加模态框容器 #

模态框需要在全局层级显示，所以我们把它放到默认布局（layouts/default.vue）里，方便全局调用：

<template>
  <div>
    <!-- 页面内容 -->
    <nuxt />
    
    <!-- 全局登录模态框 -->
    <LoginModal 
      v-if="showLoginModal" 
      @close="showLoginModal = false" 
      is-modal
    />
  </div>
</template>

<script>
import LoginModal from '~/pages/auth/Login.vue'

export default {
  components: {
    LoginModal
  },
  data() {
    return {
      showLoginModal: false
    }
  },
  created() {
    // 通过Nuxt的事件总线来触发模态框打开
    this.$nuxt.$on('open-login-modal', () => {
      this.showLoginModal = true
    })
  }
}
</script>

3. 修改路由配置，添加导航守卫 #

我们需要拦截/login路由的跳转，根据设备类型决定是打开模态框还是正常跳转页面：

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)

// 判断是否为移动端的工具函数（自定义断点，这里用768px为例）
const isMobileDevice = () => {
  if (process.client) {
    return window.innerWidth <= 768
  }
  // 服务端渲染时默认返回非移动（可根据需求调整）
  return false
}

export function createRouter() {
  const router = 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, },
    ],
  })

  // 全局前置路由守卫
  router.beforeEach((to, from, next) => {
    if (to.path === '/login') {
      if (!isMobileDevice()) {
        // 桌面端：取消路由跳转，触发模态框打开
        next(false)
        if (process.client) {
          Vue.prototype.$nuxt.$emit('open-login-modal')
        }
      } else {
        // 移动端：正常跳转到登录页面
        next()
      }
    } else {
      next()
    }
  })

  return router
}

4. 处理边缘情况：直接访问/login链接 #

如果用户在桌面端直接输入/login网址，我们需要跳回首页并打开模态框，在Login组件的created钩子中添加逻辑：

<script>
export default {
  props: {
    isModal: {
      type: Boolean,
      default: false
    }
  },
  created() {
    if (process.client && !this.isModal && window.innerWidth > 768) {
      // 桌面端直接访问/login时，跳回首页并打开模态框
      this.$router.push('/')
      this.$nuxt.$emit('open-login-modal')
    }
  }
}
</script>

5. 页面内登录按钮的处理 #

页面中的登录按钮，点击时也要根据设备类型做不同处理：

<template>
  <button @click="handleLoginClick">登录</button>
</template>

<script>
export default {
  methods: {
    handleLoginClick() {
      if (window.innerWidth <= 768) {
        this.$router.push('/login')
      } else {
        this.$nuxt.$emit('open-login-modal')
      }
    }
  }
}
</script>

这样一套下来，就完美实现了桌面端点击/login打开模态框，移动端正常跳转页面的需求，而且代码复用性高，逻辑也清晰。

内容的提问来源于stack exchange，提问作者PirateApp