NuxtJS 中的自定义路由

Question

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

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

知道我该怎么做吗？

Answer 1

参考Routing in nuxt.js documentation page，它会自动生成没有 pages/的路由。

src/client/pages 文件夹中是否有 pages 子文件夹？

Answer 2

你应该添加这样的东西......

routes: [
  {
    path: '/about-us',
    name: 'about_us',
    component: AboutUs
  }
]

所以你可以选择路径和组件

Answer 3

使用 nuxtjs，您不需要为路由做太多事情。 如果只是你需要你的网址是

1. www.mysite.com/about-us
2. www.mysite.com/contact-us

您需要做的就是让这两个 .vue 文件将子目录指向 pages 文件夹 如下图，应该可以了。

虽然我理解你的问题，但如果有任何自定义功能来操纵路由，我不确定是否有类似的东西。

Answer 4

在路由器属性内的nuxt.config.js文件中添加extendRoutes函数

export default {
  router: {
    extendRoutes (routes, resolve) {
      // get your routes Array and do what ever you like
    }
  }
}

Answer 5

要自定义路由路径，很简单，你可以使用nuxt.config.js中的extendRoutes函数，然后像这样编辑路径属性：

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;
}

Answer 6

你可以很容易地去其他路线。

<nuxt-link   to="/your_custom_url" >
      <button @click="your_function">Go Next URL</button>
</nuxt-link>

Answer 7

**如果你在

页面目录

您的路线将是页面目录中的文件。

** 或者您可以添加自定义路线。下面列出了说明.......

1 .将 @nuxtjs/router 依赖项添加到您的项目 {yarn add --dev > >@nuxtjs/router # 或 npm install --save-dev @nuxtjs/router}。

1. 将@nuxtjs/router 添加到nuxt.config.js 的buildModules 部分。

这应该适用于您的自定义 routes.js。 然后，您制作自己的路线并映射您想要的任何目录。

了解更多。访问https://www.npmjs.com/package/@nuxtjs/router

............谢谢............