如何让 Nuxt 路由器更有活力？

Posted 2023-02-22

【中文标题】如何让 Nuxt 路由器更有活力？

【英文标题】：How to make Nuxt router more dynamic?

【发布时间】：2021-09-10 21:45:35

【问题描述】：

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

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

是否可以为此注册别名？

类似：

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

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

【参考方案1】：

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

可以这样使用

<router>

  alias: [
    'cool-fancy-alias',
  ]

</router>

<template>
...
</template>

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

---

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

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 issue，但不确定这是否可以推断为alias。也许在那里的项目上问它，@posva 负责路由器并在那里做一些很棒的事情。