如何让 Nuxt 路由器更动态? [英] How to make Nuxt router more dynamic?

问题描述

我目前正在用 vue 替换旧版应用.

I am currently replacing a legacy-app with vue.

我有一个复杂的路由，比如 /foo/:category/:sub/:match.大多数时候，url 就像在那个路由定义中一样.对于一些流行网址的 SEO 认为他们想要像 /veryPopularSub 这样的短网址.

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?

类似于:

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

访问aSpecificShortcut时，浏览器不应重定向

When accessing aSpecificShortcut the browser should not redirect

推荐答案

您可以使用 router-extras-module 如果您想在保持简单的同时为您的应用增加更多的灵活性.

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

可以这样使用

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

<template>
...
</template>

不幸的是，这里不支持动态路径:https://github.com/nuxt-community/router-extras-module/issues/132#issuecomment-725413491

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?
        }
      )
    }
  }
}

vue-router@4 有一些变化，完整列表可在此处获得:https://next.router.vuejs.org/guide/migration/

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

同时，在 Nuxt3(由 Vue3 提供支持)发布之前，Nuxt 中将无法使用此功能.不过，不确定它是否可以在那里得到支持.

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.

有这个 github 问题，但是不确定这是否可以外推到 alias.也许在那里的项目中询问它，@posva 负责路由器并在那里做很棒的事情.

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.

这篇关于如何让 Nuxt 路由器更动态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！