잘못된 URL 매개 변수를 사용하여 404 페이지로 리디렉션하는 방법

잘못된 URL 매개 변수를 사용하여 404 페이지로 리디렉션하는 방법

나는 사용자 ID로 사용자 페이지를 탐색하기 위해 vue-roouter를 사용한다.그리고 라우터.js는 다음과 같이 보인다.

export default new Router({ 
  mode: 'history', 
  base: process.env.BASE_URL, 
  routes: [ 
    { 
      path: '/user/:id',
      name: 'user',  
      component: () =>  
        import(/* webpackChunkName: "user" */ './views/User.vue'),
      props: true               
    },
    {
      path: '/404', 
      name: '404',
      component: () => import('./views/404.vue'),
    },
  ] 
}) 

만약 누군가가 의 URL로 간다면/user/some-invalid-id, 404 페이지로 리디렉션하려면 어떻게 해야 하는가?

내 앱에서 모든 사용자 데이터는 App.js'에 로드된다.breforecreate(), 그리고 내부적으로는 기존 사용자에 대해 다음과 같이 사용자 보기에 액세스한다.

<router-link :to="{name: 'user', params:{id: u.pk}}" >                  
  <a> {{u.first_name}} {{u.last_name}} </a>                             
</router-link> 

푸시 함수 호출로 프로그래밍 방식으로 리디렉션하는 것이 가능하다는 것을 알고 있다.그런데 이 코드를 어디에 써야 할지 모르겠어.

this.$router.push('/404') 

에서User.vue페이지 보기, 나는 vuex getter라고 불리는 vuex getter를 사용한다.userByID데이터를 검색하기 위해서입니다.

userByID: (state) => id => {
    return state.users.find(u => (u.pk == id))
}

해야한다router.push('/404')에 발생하다userByID아니면 발신자?템플릿 렌더링을 처리하는 방법undefined사용자 객체?

'내비게이션 가드'를 사용하길 원하는 것 같은데, 특히 a.beforeEnter훅을 채우다/user/:id노선으로 가다

이와 비슷한 것(시험된 것이 아니라 방향만):

routes: [ 
    { 
        path: '/user/:id',
        name: 'user',  
        component: () =>  
            import(/* webpackChunkName: "user" */ './views/User.vue'),
        props: true,               
        beforeEnter: (to, from, next) => {
            if (!userById($route.params.id)) {
                next('/404'); 
            }
            else {
                next();
            }
        }        
  }
    },
    {
        path: '/404', 
        name: '404',
        component: () => import('./views/404.vue'),
    },
  ] 

사용자를 호출하지 않고도 사용자가 유효한지 확인할 수 있어야 한다는 점에 유의하십시오.부에 구성 요소

또한 다음과 같은 기능을 구현할 수 있다.beforeRouteEnterUser.vue를 직접 연결하십시오. 다른 사용자에게 전화할 수는 없지만구성 요소가 아직 장착되지 않은 vue 메서드.

내비게이션 가드에 대한 자세한 정보: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards

userById 메서드가 스토어에 액세스하는 경우, 이 게시물을 찾았는데, 이 게시물을 통해 스토어에 액세스하는 데 도움이 될 수 있음beforeEnter방법:후크 입력 전 사용을 위해 vue-roouter의 비동기 저장소 데이터에 액세스하는 방법

참조URL: https://stackoverflow.com/questions/53364366/how-to-use-vue-router-to-redirect-to-404-page-with-invalid-url-parameter