How to Redirect in Vue

On a regular web page we can link to other pages by using a basic anchor tag:

<a href="www.google.com">Google</a>

If you're using Vue Router, you'll use the special RouterLink component:

<RouterLink :to="www.google.com">Google</RouterLink>

But what if you want to redirect programmatically, without using an anchor tag at all?

If you're using Vue Router you'll push the new URL onto the router in order to do a redirect: router.push('/blog').

That's the short answer, but there's more to uncover here.

In this short article we'll cover how to redirect to internal and external pages, if you're using Nuxt 3, or Vue Router, and if you're just using plain Vue.

First we'll cover how to do this with plain Vue, and then we'll get into how this can be done if you're using Vue Router, and then with Nuxt 3.

Redirecting to external pages is identical to redirecting to internal pages, so we'll only cover this once.

Redirecting with Plain Vue

Let's say you want to navigate the app to the url https://www.yoursite.com/blog. If you want to redirect programmatically you need to use the browser's API for this:

window.location.href = 'https://www.yoursite.com/blog';

You can also use just a relative path, which is better because it will only change what comes after the first /. This way if your hostname changes you don't need to update anything in your code:

window.location.href = 'blog';

Redirecting with Vue Router

If you're using Vue Router and you wanted to navigate to your blog, you would call router.push:

router.push('www.yoursite.com/blog');

Using a relative path to simplify things:

router.push('blog');

If you have a named route you can also use that name, by passing a location object to the push method:

// Named route
const router = new VueRouter({
  routes: [
    {
      path: '/blog',
      name: 'blog',
      component: Blog,
    }
  ]
});

// Navigating to the named route
router.push({ name: 'blog' });

Redirecting with Nuxt 3

Since Nuxt 3 uses Vue Router, you can use all of the techniques we just described.

But we also get a few extra tools that let us redirect on the server-side.

If we're in a middleware we can use navigateTo in order to go somewhere else:

export default defineNuxtRouteMiddleware((to, from) => {
  // ...

  return navigateTo('/search', { redirectCode: 301 })
})

It's usually a good idea to include a redirect code to indicate to the browser if this redirect is permanent (301) or temporary (302).

We can also define redirects in our route rules, so the redirect happens before the request even hits our server:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export default defineNuxtConfig({
  // ...

  routeRules: {
    '/clean-components': {
      redirect: '/clean-components-toolkit',
    },
    '/clean-components/login': {
      redirect:
        'https://musing-spence-3e6273.netlify.app/clean-components/login',
    },
    '/reusable-components/login': {
      redirect:
        'https://musing-spence-3e6273.netlify.app/reusable-components/login',
    },
  },

  // ...
})

Conclusion

You can dig deeper into all of the options that Vue Router gives you by reading their detailed guide.

It goes into everything you could possibly need, and explains it all very clearly. Definitely worth reading!