Блог

Я пытаюсь перенаправить на страницу 404, если посещенный профиль пользователя не существует. Я запускаю асинхронный созданный перехват жизненного цикла, который проверяет, существует ли пользователь, и если нет, я использую $router.push для перехода на страницу 404, как показано ниже:

component.vue

 async created() {
    const userExists = await this.$store.dispatch("user/creatorExists", {
        userId: this.$route.params.userId
    });
    if (!userExists) {
        this.$router.push({ name: "pageNotFound" });
    }
  

Проблема в том, что во время вызова для проверки, существует пользователь или нет, component.vue загрузится полностью, поэтому конечный пользователь увидит, как начальный компонент мерцает на их экране перед перенаправлением.

Есть ли лучший способ перенаправить на страницу 404, если пользователь не существует?

Используйте beforeRouteEnter встроенную защиту навигации

 import store from "wherever/your/store/lives"

export default {
  name: "UserProfile",
  async beforeRouteEnter (to, from, next) {
    const userExists = await store.dispatch("user/creatorExists", {
        userId: to.params.userId
    });
    if (!userExists) {
        return next({ name: "pageNotFound" });
    }
    next()
  },
  // data, computed, methods, etc
}
  

Смотрите также Выборка данных — выборка перед навигацией

Обратите внимание, что нет доступа к компоненту Vue через this внутри beforeRouteEnter guard, поэтому вам нужно будет импортировать свой store из любого места, где он определен.

Мое предложение заключается в том, что вы должны поместить логику в глобальный, прежде чем охранять использование router.beforeEach

 const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
 // Check each time before entering the page or a specific page  
})