Nuxt.js: support vue-router alias and redirect

[corsen2000]

In our application we would like to use a vue-router alias to map / to /something for the time being. We can not currently do this in Nuxt.js using extendRoutes() as it can only be used to add a new component based route.

Can additional API be added such that we can extend the router in anyway that we would like and make use of these vue-router features?

As a workaround we are using redirect() in Nuxt.js middleware.

I tested the vue-router features by manually modifying the generated router.js file and it seemed to work without issue. If this is true the change only requires additional API to allow the modification to be passed through.

Thank you for the consideration.

_{This question is available on Nuxt.js community (#c379)}

[Atinux]

Hi @corsen2000

I really don't recommend to use alias with vue-router since it's bad for SEO to have 2 routes with the exact same content (duplicate content). This is why I did not give the option to respect the best-practices. Also, for nuxt generate, the aliases won't be generated too.

The redirect() is the right way to do 👍

[corsen2000]

@Atinux thanks for the explanation. I'll stick with redirect().

[corsen2000]

@Atinux context.redirect() seems to have a significant disadvantage to vue-router->redirect as it causes an extra round trip from the client to the server. This will significantly slow down the load time of the page that is being redirected.

I understand your rationale in regards to SEO, but in our case these routes are only accessible when authenticated anyways, so they should never be picked up by a search engine.

To provide a little more context. Our application does not have a home page currently, so instead we want to redirect / to a different page. We don't want to just make the home page the other page since:

• It would negatively affect the way the user bookmarks or copies it long term
• It would require extra code changes when we do create a home page

vue-router->redirect seems to give us the behavior we want and works with Nuxt when modified manually.

I can work around this in Nuxt.js using a plugin along side router.addRoutes().

Can this request be reconsidered?

Additionally I tried using a Navigation Guard while looking into this and discovered that they can not be used in Nuxt.js to redirect. The server just hangs when you try to call next with an argument, see this reproducer.

If this intentional or a bug? Should I file a new issue?

Thank you for the consideration.

[Atinux]

@corsen2000 this is exactly why I cannot add the redirect property into nuxt.js, it's for the server-side implementation which does not work by default.

Take a look at how we surcharges the next method on the server-side: https://github.com/nuxt/nuxt.js/blob/master/lib/app/server.js#L28-L42

I believe for your case, you can use extendRoutes to add an alias for the /something to / (extendRoutes is not only for adding new routes but for updating the current ones too).

Or even better, you can create a the / page like this pages/index.vue:

<script>
import About from '~pages/about'
export default About
</script>

This way, / is an alias of /about :)

[corsen2000]

@Atinux

I believe for your case, you can use extendRoutes to add an alias for the /something to / (extendRoutes is not only for adding new routes but for updating the current ones too).

I don't know what you mean by this. Router Template will never create an alias, unless I misunderstand the template.

Thanks for the suggestion regarding modifying pages/index.vue, but that does not meet my requirements since the URL will remain /. Users will not have the links and bookmarks that I want them to keep around.

why I cannot add the redirect property into nuxt.js, it's for the server-side implementation which does not work by default.

I've tested vue-router redirect in 2 ways, neither of which caused a problem that I could see with Nuxt.js.

1. Manually modified the generated router.js file to have a route at / that uses the redirect or alias properties of vue-router.
2. Adding the same route but at run time with a plugin and router.addRoutes().

For now I am using the plugin and router.addRoutes(). I'll post back if we see any issues with this route which contains a vue-router redirect, but it seemed to be working fine. I'd prefer to be able to add this at build time, but I don't see any way to do that with the current implementation of extendRoutes() and the associatedrouter.js template.

[epartipilo]

@corsen2000 and @Atinux
In my case I want to show a page that can be access in three languages so the url have to be in each language for SEO purposes and the content will render depending on the language selected so the URL and aliases are independent from the content or the directory/file structure.

Right now I'm thinking of making a map of aliases and inject them to the Nuxt router configuration as aliases matching the route name.

Do you have an idea of how to achieve this any other way?

@Atinux Good job by the way!
Love Nuxt.js.

Cheers!

[jhondge]

Hi @epartipilo The methods of extendRoutes and create the reference page which you had choose? I have the same scene with you, I have multiple sub folders, if I use the create reference page like @Atinux says 'even better' it's will have tedious work

[epartipilo]

Hi @jhondge

Before looking to answer your comment I was thinking of implementing this but I found that the solution I used by the time has been updated so you can take a look to either both of them this

Good luck and leave a comment with your experience.
Thanks!

[jhondge]

Hi @epartipilo
Thanks so much, I use this solution, and It's worked for me.

[Chance722]

I solved this problem by extendRoutes

extendRoutes (routes) {
      routes.forEach(item => {
        if (item.path.includes('/pc')) {
          item.path = item.path.replace('/pc', '')
        }
      })
    }

by this way I can show the content under the pc floder but without 'pc' of my request url

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.