Vue: 소품이 설정되지 않은 경우 볼 수 있는 액세스 금지

Vue: 소품이 설정되지 않은 경우 볼 수 있는 액세스 금지

나는 Vue에서 '설정'과 '놀이'라는 두 가지 관점을 가진 게임을 개발하고 있다.전자에 설정한 파라미터는 후자에 소품으로 통과되고 게임은 그 파라미터로 시작된다.

그러나 사용자가 직접 액세스하는 것을 중지하는 것은 없다..../#/play필요한 소품 설정을 우회하는 것.나는 합리적인 채무 불이행을 설정함으로써 이 문제를 해결한다.

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

... 하지만 사용자가 이 뷰를 통해 액세스하지 못한 경우 해당 뷰에 대한 액세스를 어떻게 제한할지 궁금함.../#/setup알고 있다.required: true내비게이션 가드도 있지만, 이 경우 둘 중 하나를 어떻게 활용해야 할지, 아니면 둘 다 최선의 선택인지 잘 모르겠다.

다음과 같은 경우 쉽게 리디렉션할 수 있는 방법이 있는가?.../#/play직접 접속할 수 있는가?

당신은 그것을 사용할 수 있다.beforeEnter 내비게이션 가드:

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.

참조URL: https://stackoverflow.com/questions/61080124/vue-prevent-access-to-view-if-props-not-set