Tips for manipulating specific URL redirection to an alternative URL within a NuxtJs application

Question

Take this scenario, where the inputted URL is:

http://localhost:3000/course-details

The desired outcome should be a redirection to http://localhost:3000/courses

I recall there being a method for achieving this, but it slips my mind at the moment.

Answer 1

Answer №1

To manage this situation efficiently, you can implement the necessary changes in the middleware of a vue-page-component.

Consider the following file: pages/course-details.vue

<script>
export default{
  middleware({ redirect }) {
    return redirect('/courses');
  }
}
</script>

In addition to using vue-page-component middleware, another option is to utilize nginx for handling such redirects.

location = /course-details {
  return 301 /courses;
}

Answer 2

To manage this situation efficiently, you can implement the necessary changes in the middleware of a vue-page-component.

Consider the following file: pages/course-details.vue

<script>
export default{
  middleware({ redirect }) {
    return redirect('/courses');
  }
}
</script>

In addition to using vue-page-component middleware, another option is to utilize nginx for handling such redirects.

location = /course-details {
  return 301 /courses;
}

Answer 3

@nuxtjs/router-extras provides a helpful library that enables more customizable options for routers, such as the ability to redirect to another URL.

/pages/course-details.vue

<router>
{
  redirect: '/courses',   // Another option: redirect: { name: 'courses' },
}
</router>

<template>
[...]

Alternatively, DengSihan's solution offers a solid vanilla approach.

Answer 4

@nuxtjs/router-extras provides a helpful library that enables more customizable options for routers, such as the ability to redirect to another URL.

/pages/course-details.vue

<router>
{
  redirect: '/courses',   // Another option: redirect: { name: 'courses' },
}
</router>

<template>
[...]

Alternatively, DengSihan's solution offers a solid vanilla approach.