How to make Nuxt router more dynamic?

user_510083 0
Viewed 1455

I am currently replacing a legacy-app with vue.

I have a complex route like /foo/:category/:sub/:match. Most of the time, the urls are just like in that route definition. For some popular url's SEO figured they want short urls like /veryPopularSub.

Is it possible to register an alias for that?

Something like:

{ name: 'generic', path: '/foo/:category/:sub/:match' },
{ path: '/aSpecificShortcut', alias: { name: 'generic', params: { category: 1, sub: 2, match: 3 } } }

When accessing aSpecificShortcut the browser should not redirect

vue-router vuejs2 nuxt.js vue.js
1 Answers

You can use router-extras-module if you want to add more flexibility to your app while staying simple.

Can be used this way

<router>
{
  alias: [
    'cool-fancy-alias',
  ]
}
</router>

<template>
...
</template>

Unfortunately, this will not support dynamic path as told here: https://github.com/nuxt-community/router-extras-module/issues/132#issuecomment-725413491

A more in-depth configuration may be tried as explained in my answer here but even tho, I'm not sure that you can have anything dynamic like this

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push(
        {
          name: 'foo-category-sub-match',
          path: '/foo/*/*/*',
          component: resolve(__dirname, 'pages/data/index.vue'),
          alias: 'fancy-path-name' // dynamic here?
        }
      )
    }
  }
}

There are some changes on vue-router@4, full list available here: https://next.router.vuejs.org/guide/migration/

Meanwhile, this will not be available in Nuxt until Nuxt3 (powered by Vue3) is released. Still, not sure if it may be supported even there.

There is this github issue, but not sure that this may be extrapolated to alias. Maybe ask it on the project there, @posva is in charge of the Router and doing awesome things there.

user_88165850
Related