Difficulty Redirecting to a 404 Page

user_9951273 0
Viewed 97

I'm trying to redirect to a 404 page if the user profile visited does not exist. I'm running an asynchronous created lifecycle hook which checks if the user exists, and if not I use $router.push to push to the 404 page, as shown below:

component.vue

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

The problem is that during the call to check if the user exists or not, component.vue will load fully, so the end user will see the initial component flicker on their screen before being redirected.

Is there a better way to redirect to a 404 page if a user does not exist?

vue-router vue.js javascript
2 Answers

Use a beforeRouteEnter in-component navigation guard

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
}

See also Data Fetching - Fetching Before Navigation

Note that there is no access to the Vue component via this within the beforeRouteEnter guard so you'll need to import your store from wherever it is defined.

user_2833660

My suggestion is that you should put logic in the global before guards using router.beforeEach

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

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