NuxtJS中的自定义路由

Question

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

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

你知道我该怎么做吗？

Answer 1

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

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

Answer 2

参考Routing in nuxt.js documentation page，它将自动生成没有页/的路线。

是否可能在src / client / pages文件夹中包含pages子文件夹？

Answer 3

您应该添加类似这样的内容...

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

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

Answer 4

使用nuxtjs，您无需为路由做很多事情。 如果仅仅是您的网址是

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

所有您需要做的是，让这两个.vue文件将子目录定向到页面文件夹 就像下面的图片一样，应该这样做。

尽管我理解您的问题，但是否有任何自定义功能可操纵路由，但不确定是否有类似功能。

Answer 5

要自定义路由路径，只需在def load_cities(request): .... data = { 'tags': list(cities) } return JsonResponse(data) 中使用extendRoutes函数并按如下所示编辑path属性：

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)

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

<块引用>

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

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

<块引用>

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

……谢谢………………