Vuepress: Best practice for redirects?

[bayssmekanique]

Is there a best practice solution for redirecting a route?

I tried using a simple redirect script, but it seems to have an issue with the route and just reloads the same page continually in a loop:

<script>
module.exports = {
  created(){
    this.$router.go('/')
  }
}
</script>

I've considered overloading the router property in config.js, or building a redirect component and using that, but both options seem a little heavy for what should probably be a "baked-in" feature.

[bayssmekanique]

Actually, I realize the issue with the previous script. This script does work:

<script>
module.exports = {
  created(){
    this.$router.push('/')
  }
}
</script>

The question still stands though, should this be something that can be accomplished by a YAML Front Matter property or something similar?

[yyx990803]

You can add custom redirects using enhanceApp.js + router.addRoutes.

[bayssmekanique]

For anyone else that stumbles across this looking for a solution, add a .vuepress/encahnceApp.js file and define your redirects within it like this:

export default ({ router }) => {
  router.addRoutes([
    { path: '/foo/', redirect: '/' },
    { path: '/bar/', redirect: '/' }
  ])
}

[yyx990803]

In addition, I'd recommend using Netlify which allows you to define CDN level redirects with proper response codes.

[mdaffin]

@bayssmekanique do these work for you on production sites? I encountered #160 when I tried.

Also, once the plugin support lands you should be able to adapt this if you want to generate a netlify redirect file.

[bayssmekanique]

@mdaffin, I read your post twice without realizing you were addressing this same question, so I apologize for the duplication.

It indeed fails in production, so I have reverted to using redirect scripts on each of the pages I need to have redirected.

[rasapetter]

@bayssmekanique How did you accomplish that? I can't seem to get a redirection script through the build system.

I would've expected something along these lines to work, but instead I get an error complaining about window being undefined.

<script>window.location.href = 'https://example.com';</script>

[bayssmekanique]

I had to export the theme and override the vue component to perform redirects. This was also on version 0.8.4, so things have likely changed by now.

[telepenin]

You can add custom redirects using enhanceApp.js + router.addRoutes.

What if I want to redirect on the specific page from "/". That suggestion doesn't properly work -> I see 404, but URL in the address bar is changed.

[nanxiaobei]

encahnceApp

For anyone else that stumbles across this looking for a solution, add a .vuepress/encahnceApp.js file and define your redirects within it like this:

export default ({ router }) => {
  router.addRoutes([
    { path: '/foo/', redirect: '/' },
    { path: '/bar/', redirect: '/' }
  ])
}

Be carefull, here is a typo:
encahnceApp ❌
enhanceApp ✅

[saragee3]

@telepenin

You can add custom redirects using enhanceApp.js + router.addRoutes.

What if I want to redirect on the specific page from "/". That suggestion doesn't properly work -> I see 404, but URL in the address bar is changed.

Did you find a solution for this?

[lauragift21]

@saragee3 I used the solution here https://github.com/vuejs/vuepress/issues/1382 and it worked for me.

[saragee3]

awesome thanks @lauragift21. I ended up implementing something similar. https://github.com/vuejs/vuepress/issues/1803#issuecomment-602783264

[Dan1ve]

In my case, the enhanceApp.js routing didn't work for some reason.
Hence, I implemented a tiny custom component to do the redirect, which seems to work fine:

Redirect.vue

<template>
</template>


<script>
    /** Redirects to the given 'to' url, which is relative to the current location. */
    export default {
        name: 'Redirect',
        props: {
            to: {
                type: String,
                required: true
            }
        },
        beforeMount() {
            document.location.replace(this.to);
        }
    }
</script>

Then, in my readme.md, I simply use

<Redirect to="foo/" />

This has also the advantage that the (awesome!) link checker plugin won't complain about missing routes.

[ocian]

For anyone else that stumbles across this looking for a solution, add a .vuepress/encahnceApp.js file and define your redirects within it like this:

export default ({ router }) => {
  router.addRoutes([
    { path: '/foo/', redirect: '/' },
    { path: '/bar/', redirect: '/' }
  ])
}

This not become effective for me, and I did it like this in .vuepress/enhanceApp.js
It's a centralized control Router Redirect powered by Vue Router.

export default ({ router }) => {
  router.beforeEach((to, from, next) => {
    const redirectList = {
      '/': '/zh/',
    }
    const redirect = redirectList[to.path]

    if (redirect) {
      next({ path: redirect })
    } else next()
  })
}