CODEWITHSUNDEEP
vue.js
Leos Literak
Leos Literak

Reputation: 9474

Redirect on error to another component in Vue

I want to redirect from some page to 404 page if there is an error. It works but there is a cryptic error.

Profile.vue

methods: {
  async getProfile(id) {
    try {
      const response = await this.$store.dispatch('GET_USER_PROFILE_BY_ID', { id });
      this.userProfile = response.data.data;
    } catch (err) {
      this.$log.error(err);
      await this.$router.push({ name: 'not-found' });
    }
  },
},

router.js

{
  path: '*',
  name: 'not-found',
  component: () => import(/* webpackChunkName: "content-chunk" */ './views/site/404.vue'),
},

404.vue

export default {
  name: 'not-found',
  components: {
    BRow,
    BCol,
  },
};

And I can see this error in browser console

vue-router.esm.js:16 [vue-router] missing param for named route "not-found": Expected "0" to be defined

There is no property or param 0. Is my approach correct?

Upvotes: 0

Views: 946

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The path * is used for redirection if the link provided is not defined in your routes, to redirect to the 404 page you could push not existing path like push('/this-path-not-exists') or use another path like path:'/not-found' which should be defined it has 404 page as component

Upvotes: 1

farincz
farincz

Reputation: 5173

Router don't know to what URL should use instead a * placeholder.

You can define yout 404 route with specified path or add additional parameter to push.

Or simply call this.$router.push('/404') with absolute url

Upvotes: 2

Related Questions