Vue：如果未设置道具，则阻止访问视图

Question

我正在用 Vue 开发一个游戏，它有 2 个视图：“设置”和“游戏”。你在前者中设置的参数在后者中作为道具传递，游戏以这些参数开始。

但是没有什么可以阻止用户直接访问.../#/play，从而绕过所需道具的设置。我通过设置合理的默认值来解决这个问题......

props: {
  prop: { default: 'sensible default' },
  // ...
},

...但我想知道如果用户没有通过.../#/setup 访问该视图，如何完全限制对该视图的访问。我知道required: true 和导航守卫，但不确定在这种情况下如何使用其中一个/两个，或者它们是否是最佳选择。

如果直接访问.../#/play，有没有简单的重定向方法？

Answer 1

您可以使用beforeEnternavigation guard：

routes: [
  {
    path: '/setup',
    name: 'setup',
    component: Setup
  },
  {
    path: '/play',
    name: 'play',
    component: Play,
    props: true, // <-- converting params to props
    beforeEnter: (to, from, next) => {
      if (to.params.myprop) {
        next(); // <-- everything good, proceed
      } else {
        next({ name: 'setup' }); // <-- redirect to setup
      }
    }
  }
]

这是在允许导航到play 路由之前检查某个参数是否存在，否则它会重定向回setup。