Как использовать vue-router для перенаправления на страницу 404 с неверным параметром URL - PullRequest
Новая
       9

Как использовать vue-router для перенаправления на страницу 404 с неверным параметром URL

0 голосов
/ 18 ноября 2018

Я использую vue-router для навигации по страницам пользователя по их идентификатору. И router.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>

Я знаю, что можно программно перенаправить с помощью вызова функции push. Но я не знаю, где этот код должен использоваться. 

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

На странице просмотра User.vue я использую метод получения vuex с именем userByID для извлечения данных. 

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

Должен ли router.push('/404') произойти в userByID или его вызывающей стороне? Как мы имеем дело с шаблоном рендеринга с undefined пользовательским объектом?

1 Ответ

0 голосов
/ 18 ноября 2018

Я думаю, что вы хотите использовать 'Navigation Guards', в частности, 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'),
    },
  ]

Обратите внимание, что вам нужно будет определить, является ли пользователь действительным, не вызывая компонент User.vue.

Вы также можете реализовать хук beforeRouteEnter непосредственно для User.vue,хотя вы не сможете вызывать другие методы User.vue, так как компонент еще не будет смонтирован.

Подробнее о средствах защиты навигации: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards

Учитывая, что ваш метод userByIdПолучая доступ к хранилищу, я обнаружил этот пост, который может помочь вам получить доступ к хранилищу в вашем методе beforeEnter: Как получить доступ к данным асинхронного хранилища в vue-router для использования в ловушке beforeEnter?

...