Image

touring-vue-router

4 min read
Last update: December 19, 2021

Redirect & Alias

As our application evolves, we may need to change the URL paths of where our pages initially found. There are two convenience methods for this:

⚠️ Problem: Changing Routes

What if we needed to change our application from using /about for our about page to /about-us . How might we deal with this?

✅ Solution #1: Redirect

Obviously the first step is to change our original route:

const router = new VueRouter({
routes: [
...
{
path: '/about-us',
name: 'about',
component: About
}
]
})

If we’re using named routes then we don’t need to change our router-links at all. Otherwise we would have to. Then, since there might be links around the internet to our /about page, we want to make that redirect from /about to /about-us, with the following additional route.

const router = new VueRouter({
routes: [
...
{
path: '/about',
redirect: { name: "about" }
}
]
})

Note we’re using the named route for the redirect. We could have also used redirect: "/about-us" to get the same functionality, but this is hard-coding a URL in one more place we’d have to change if the path changed. Here’s how it looks:

https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1.1607724721632.gif?alt=media&token=9db43660-9344-49aa-bf6b-1f668e679a5a

✅ Solution #2: Alias

Instead of redirecting the old path we might just want to alias it, meaning just provide a duplicate path to the same content. We could update that path and provide an alias to the old path:

const router = new VueRouter({
routes: [
...
{
path: '/about-us',
name: 'about',
component: About,
alias: '/about' // <----- } ] }) ``` Now the user can go to `/about` or `/about-us` and they’ll get the same content. ![https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F2.1607724721633.gif?alt=media&token=c0696625-f0b0-4c57-9e54-ce727581d101](https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F2.1607724721633.gif?alt=media&token=c0696625-f0b0-4c57-9e54-ce727581d101) ## **⚠️ Problem: Complex Routes** In the application we’ve been building in our Touring Vue Router course to view an event we go to `/event/123`. Some developers might prefer this URL to be `/events/123`, the plural. Let’s assume we want to make this change, and ensure that all our old URLs redirect properly to the new URL. ## ✅ Solution: Redirecting Dynamic Segments To redirect a dynamic segment, we’ll need to get access to the params when we create the new path. To do this we’ll need to send in an anonymous function into the redirect property, like so: 📜 **/src/router/index.js** ```javascript ... const routes=[ ... { path: '/events/:id' , // <--- make plural 'events' name: 'EventLayout' , ... }, { path: '/event/:id' , redirect: to=> {
    return { name: 'EventDetails', params: { id: to.params.id } }
    }
    },
    ```

    Notice how inside this anonymous function we could do some complex logic if needed. Turns out we can simplify what we wrote above, because the `id` param will get passed along automatically. Vue Router is smart like this:

    ```javascript
    {
    path: '/event/:id',
    redirect: () => {
    return { name: 'EventDetails' }
    }
    },
    ```

    The id in the URL will get passed when we redirect from `/event/123` to `/events/123`, as you can see below:

    ![https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F3.1607724728405.gif?alt=media&token=81dc269f-f509-4f89-8c0d-8af7346816e2](https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F3.1607724728405.gif?alt=media&token=81dc269f-f509-4f89-8c0d-8af7346816e2)

    However, if you watched the last lesson you know that we have two children routes nested under /events, specifically the `register` and `edit` routes. The solution above doesn’t account for these children routes, which you can see in our router file looking like this:

    ```javascript
    {
    path: '/events/:id',
    name: 'EventLayout',
    props: true,
    component: EventLayout,
    children: [
    {
    path: '',
    name: 'EventDetails',
    component: EventDetails
    },
    {
    path: 'register', <---- How do we redirect for this? name: 'EventRegister' , component: EventRegister }, { path: 'edit' , <---- and this? name: 'EventEdit' , component: EventEdit } ] } ``` Well, there are two solutions. ## ✅ Redirect with children It turns out that redirect has the ability to accept children. So we can do this: ```javascript { path: '/event/:id' , redirect: ()=> {
        return { name: 'EventDetails' }
        },
        children: [
        { path: 'register', redirect: () => ({ name: 'EventRegister' }) },
        { path: 'edit', redirect: () => ({ name: 'EventEdit' }) }
        ]
        },
        ```

        ## ✅ Redirect with Wildcard

        Another way we could solve this is with a wildcard, like so:

        ```javascript
        {
        path: '/event/:afterEvent(.*)',
        redirect: to => {
        return { path: '/events/' + to.params.afterEvent }
        }
        },
        ```

        This is taking whatever comes after the matching word `/event/` and placing it after `/events/`. This is less code, and covers all children routes. Here’s it working:

        ![https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F4.1607724730944.gif?alt=media&token=3178bda8-3b2d-428a-ba2d-3a93354837db](https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F4.1607724730944.gif?alt=media&token=3178bda8-3b2d-428a-ba2d-3a93354837db)