Vue-Router未授权触发弹窗失败，遇prop类型错误求助

让我们一步步拆解你的问题，先看报错的核心原因：

问题根源 #

1. 路由Meta的类型错误：你在路由里把meta.showModal赋值成了isAuthorized函数，而不是布尔值。当Sidebar组件读取this.$route.meta.showModal时，拿到的是一个函数，不是预期的Boolean类型，直接传给UnauthorizedModal的showModal props就触发了类型校验失败。
2. isAuthorized函数无实际作用：这个函数只是返回传入的参数，调用它并不会更新任何状态（比如路由Meta或者组件数据），相当于做了个无用功。
3. 组件状态初始化错误：Sidebar组件的showUnauthModal初始值是函数，后续watch监听的也是函数，自然无法正确控制弹窗显示。

修复方案 #

我们需要调整路由守卫的逻辑，直接操作路由Meta的布尔值，同时修正组件的状态处理：

1. 修正路由配置与守卫逻辑

首先把路由Meta的showModal初始化为布尔值，然后在权限守卫里直接更新父路由的Meta值（因为弹窗在父组件Sidebar里）：

// 移除无用的isAuthorized函数
function isAdmin(to, from, next) {
  const isUserAdmin = store.state.authentication.isAdmin;
  if (!isUserAdmin) {
    next(false); // 阻止导航到目标路由
    // 更新父路由（/admin）的meta.showModal为true，触发弹窗显示
    to.parent.meta.showModal = true;
  } else {
    // 有权限时确保弹窗隐藏
    to.parent.meta.showModal = false;
    next(); // 正常导航
  }
}

const router = new Router({
  ...
  routes: [
    {
      path: '/admin',
      component: Sidebar,
      meta: { showModal: false }, // 初始默认隐藏弹窗
      children: [
        {
          path: 'sample',
          name: 'Sample',
          component: Sample,
          beforeEnter: isAdmin,
          meta: { title: 'Sample Page' },
        },
        ...
      ]
    }
  ]
})

2. 优化Sidebar组件的状态处理

用计算属性替代data+watch的方式，更简洁且能实时响应路由Meta的变化；同时在关闭弹窗时重置Meta值：

<UnauthorizedModal :show-modal="showUnauthModal" @toggle-modal="toggleModal" />

<script>
export default {
  name: 'Sidebar',
  components: { UnauthorizedModal },
  computed: {
    // 直接从路由Meta读取布尔值，自动响应变化
    showUnauthModal() {
      return this.$route.meta.showModal;
    }
  },
  methods: {
    toggleModal() {
      // 关闭弹窗时，把路由Meta的showModal设为false
      this.$route.meta.showModal = false;
    }
  }
}
</script>

3. 全局路由守卫重置弹窗状态（可选但推荐）

为了避免切换到其他路由时弹窗仍显示，添加全局前置守卫重置状态：

router.beforeEach((to, from, next) => {
  // 离开当前路由时，重置showModal为false
  if (from.meta.showModal) {
    from.meta.showModal = false;
  }
  next();
})

为什么这样改？ #

• 直接操作路由Meta的布尔值，确保组件拿到的是符合props类型要求的值，解决了类型错误。
• 去掉了无用的isAuthorized函数，逻辑更直接清晰。
• 用计算属性自动响应路由变化，减少了watch的冗余代码。

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