如何重写Vue Router实现Nuxt 2多模态框的栈式导航

核心思路 #

放弃直接用beforeRouteLeave拦截路由+pushState的冲突方案，转而通过全局导航栈状态管理+路由跳转拦截+popState事件监听的组合，把模态框层级与浏览器历史完全绑定，实现类似原生App的叠加式模态导航。

具体实现步骤 #

• 用Vuex维护全局模态导航栈，记录每个模态框的组件、参数、对应URL路径
• 拦截路由跳转：判断目标路由是否对应模态框，若为是则阻止原生路由跳转，转而更新导航栈与浏览器历史
• 监听浏览器popstate事件：用户点击返回按钮时，从导航栈弹出最后一个模态框，同步更新URL
• 封装全局模态操作方法，统一处理模态框的打开/关闭与路由同步

关键代码示例 #

1. 模态栈状态管理（Vuex Store） #

创建store/modules/modal.js：

export const state = () => ({
  stack: [] // 存储模态框信息：{ id, component, props, path }
})

export const mutations = {
  PUSH_MODAL(state, modal) {
    state.stack.push(modal)
  },
  POP_MODAL(state) {
    state.stack.pop()
  },
  CLEAR_MODAL(state) {
    state.stack = []
  }
}

export const actions = {
  push({ commit }, modal) {
    commit('PUSH_MODAL', modal)
    // 推送模态框对应的URL到浏览器历史，不触发Vue Router跳转
    window.history.pushState({ modalId: modal.id }, '', modal.path)
  },
  pop({ commit, state }) {
    if (state.stack.length === 0) return
    commit('POP_MODAL')
    const lastModal = state.stack[state.stack.length - 1]
    // 替换URL为上一个模态框路径，无模态框则回到当前页面路径
    window.history.replaceState(
      { modalId: lastModal?.id },
      '',
      lastModal?.path || window.location.pathname
    )
  }
}

2. 全局模态插件与路由拦截 #

创建plugins/modal.js：

export default ({ app, store }) => {
  // 封装全局模态操作方法
  app.$modal = {
    push(modal) {
      store.dispatch('modal/push', modal)
    },
    pop() {
      store.dispatch('modal/pop')
    }
  }

  // 监听浏览器返回事件，同步关闭模态框
  window.addEventListener('popstate', (e) => {
    if (e.state?.modalId) {
      store.dispatch('modal/pop')
    } else {
      // 回到非模态路由时清空栈
      store.commit('modal/CLEAR_MODAL')
    }
  })

  // 拦截路由跳转，判断是否打开模态框
  app.router.beforeEach((to, from, next) => {
    if (to.meta.modal) {
      // 阻止原生路由跳转
      next(false)
      // 打开目标模态框并加入导航栈
      app.$modal.push({
        id: Date.now(),
        component: to.meta.modal.component,
        props: to.meta.modal.props?.(to) || {},
        path: to.fullPath
      })
    } else {
      // 非模态路由，清空模态栈后正常跳转
      store.commit('modal/CLEAR_MODAL')
      next()
    }
  })
}

3. 全局渲染模态栈 #

在layouts/default.vue中叠加渲染所有模态框：

<template>
  <div class="layout-container">
    <Nuxt />
    <!-- 按栈顺序渲染模态框，层级自动叠加 -->
    <component
      v-for="modal in $store.state.modal.stack"
      :key="modal.id"
      :is="modal.component"
      v-bind="modal.props"
      @close="$modal.pop()"
    />
  </div>
</template>

4. 路由配置（关联模态框） #

在nuxt.config.js中扩展路由，标记模态框路由：

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push(
        {
          path: '/user/:id/profile',
          component: resolve(__dirname, 'pages/user/_id.vue'),
          meta: {
            modal: {
              component: resolve(__dirname, 'components/UserProfileModal.vue'),
              props: route => ({ userId: route.params.id })
            }
          }
        },
        {
          path: '/user/:id/settings',
          component: resolve(__dirname, 'pages/user/_id.vue'),
          meta: {
            modal: {
              component: resolve(__dirname, 'components/UserSettingsModal.vue'),
              props: route => ({ userId: route.params.id })
            }
          }
        }
      )
    }
  },
  plugins: ['~/plugins/modal.js'],
  modules: ['@nuxtjs/axios']
}

注意事项 #

• 模态框组件需实现close事件，触发$modal.pop()完成关闭逻辑
• 页面刷新时：需在nuxtServerInit或客户端mounted钩子中，根据当前URL判断是否需要恢复对应模态框
• 移动端物理返回键：已通过popstate事件监听处理，无需额外配置

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