时间戳

首页 > 解决方案 > 如何让 Nuxt 路由器更有活力？

vue.js - 如何让 Nuxt 路由器更有活力？

问题描述

我目前正在用 vue 替换旧版应用程序。

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

是否可以为此注册别名？

就像是：

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

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

标签： vue.jsvuejs2nuxt.jsvue-router

解决方案

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

可以这样使用

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

<template>
...
</template>

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

可以尝试更深入的配置，如我在此处的回答中所述，但即便如此，我不确定您是否可以拥有像这样的动态

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/

同时，在 Nuxt3（由 Vue3 提供支持）发布之前，Nuxt 将无法使用此功能。不过，即使在那里也不确定它是否受到支持。

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

推荐阅读