NuxtJS 中的自定义路由

Question

我想知道如何在 nuxtjs 中重命名路由。

特别是，我有一个文件夹，名为pages与该文件夹中的一些文件（如about-us，contact-us等）。但是，我不希望路线是www.mysite.com/pages/about-us，而是www.mysite.com/about-us。也就是说，我想pages从路由中删除。

知道我该怎么做吗？

Answer 1

要自定义路由路径，只需在 中使用extendRoutes函数nuxt.config.js并编辑路径属性，如下所示：

export default {
  ...
  router: {
    extendRoutes(routes, resolve) {
      return [
        {
          name: 'about',
          path: '/my-about-us', // <--- change this
          component: resolve(__dirname, 'pages/about/index.vue'),
          chunkName: 'pages/about/index'
        },
        ...
      ]
    }
  }
}

确保返回所有路由（不仅仅是关于页面）。我曾经console.log(routes)知道这一点。

或者，您可以使用这样的条件：

extendRoutes(routes, resolve) {
  for (const route of routes) {
    if (route.path.includes('/about')) {
      route.path = '/my-about-us'
    }
  }
  return routes;
}