Nuxt.js: How to use a same component for two or multiple routes / pages?

[DaxChen]

I wanted to use the same component for both /signup and /signin route.

The reason is because the component looks something like this pen, and I would like when the use clicks signin or signup, the url changes to /signin and /signup accordingly, with the transition animation.

How can I do this with nuxt? It would be awesome to achieve this without the router-module, am I missing something?

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

[DreaMinder]

Check out this example https://github.com/nuxt/nuxt.js/tree/dev/examples/i18n/pages

[DaxChen]

Hi @DreaMinder,
Great thanks for the example! I followed the example and tried using:

<!-- ~/pages/signin -->
<script>
import Signup from '~/pages/signup'
export default Signup
</script>

But the problem is the page will rerender when changing between these pages, making the animations useless (and losing states).

[Zip753]

One of the ways to handle this is to use nested routes, that way you could control the animation by wrapping the <nuxt-child> component in <transition>, while also preserving the state in parent page. Check out this example: https://nuxtjs.org/examples/nested-routes

[pschaub]

Same issue here and I think the nuxt-child trick is bad practice.
We need a simple solution to use the same page for multiple routes.

For example we have an index.vue for the / route and a pages/:page (default of :page is 1).
In case of / we want to see the "first page" so it has the same content as pages/:page with :page = 1.

I don't see how this is easily possible right now with keeping animations working.
Please let us know if anybody knows a solution for this.

Maybe there should be a "pages aliases" feature in nuxt.config.js or something similar?
Or we just use the router-module 👍

[1hakr]

@pSchaub , I agree. If you already have a project migrating to VueJS there will be many pages whose url structure could have changed but would be linking as alternate links and still preserve SEO, then you should you have the ability to add alias then? I believe this is a very valid case.

I'm facing this issue and don't know how to solve this

[1hakr]

I was able to achieve this with declaring another path in extendRoutes instead of using alias by extending router module

extendRoutes (routes) {
  routes.push({name: 'old-path', path: '/old-path', component: '~pages/index.vue'})
}

I hope this i will be useful to others.

[manniL]

You can use extendRoutes or the redirect-module

[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.