Vue中如何防止主router-view内容变更 仅更新模态框命名router-view

问题本质 #

Vue Router 在完成路由匹配后，会按照目标路由的components配置，全量覆盖所有已挂载的命名视图内容。当前配置的模态路由只声明了modal命名对应的组件，没有给默认的default主视图配置对应内容，因此跳转时主视图会被清空。

方案1：全局守卫动态补全主视图配置（高灵活度） #

这是跨场景通用的实现方式，不需要重复给每个父路由嵌套模态子路由：

• 在路由实例初始化时配置全局前置守卫，对标记了meta.modal的特殊路由做处理：

  router.beforeEach((to, from, next) => {
    // 识别需要以模态形式弹出的路由
    if (to.meta?.modal) {
      // 复用跳转前的主视图组件作为当前路由的默认视图
      const currentMainComponent = from.matched[0]?.components?.default
      // 兜底：如果用户直接通过地址栏访问模态路由，没有前置页面时，加载全局首页作为主视图
      to.components.default = currentMainComponent ?? HomePage
      // 清空主视图的绑定props，避免路由参数变化触发主视图组件*不必要的重载*
      to.props.default = {}
    }
    next()
  })
  

• 实现效果：访问模态路由时，主路由视图完全沿用跳转前的页面内容，仅modal命名视图会加载对应的模态框组件，不会出现主视图被清空的问题。

方案2：将模态路由配置为页面嵌套子路由 #

如果模态弹岀场景不需要跨所有页面复用，可以直接把模态路由挂到需要承载它的父路由下：

• 配置示例：

  // 所有带主视图的业务路由
  {
    path: '/home',
    name: 'Home',
    component: HomePage,
    children: [
      {
        // 子路由路径保持和原路由一致
        path: 'visitors/login',
        components: {
          modal: ModalLogin
        },
        props: true,
        meta: { modal: true }
      }
    ]
  }
  

• 路由匹配时会先激活父路由的默认主视图，再在子路由匹配阶段仅更新modal命名视图，不会触发主视图清空。

配套交互优化 #

• 监听浏览器前进/后退事件，当从模态路由跳转回普通业务路由时，自动关闭对应模态框，匹配用户的返回操作预期
• 给模态遮罩层绑定点击事件，点击非模态内容区域时触发路由跳回上一级，实现和原生模态一致的关闭体验

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