【问题标题】:Custom Routes in NuxtJSNuxtJS 中的自定义路由
【发布时间】:2019-08-07 22:10:29
【问题描述】:

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

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

知道我该怎么做吗?

【问题讨论】:

  • 我不确定您使用的是哪个版本的 nuxt 或您如何创建项目,但开箱即用的 nuxt 完全符合您的要求。所有 'page' 文件都存储在 'pages' 文件夹中,但路由不会在 url 中显示 '.../pages/...'。见here
  • nuxt 默认 page 文件夹中有 page 文件夹吗?跨度>

标签: nuxt.js


【解决方案1】:

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

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

【讨论】:

    【解决方案2】:

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

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

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

    【讨论】:

      【解决方案3】:

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

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

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

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

      【讨论】:

        【解决方案4】:

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

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

        【讨论】:

          【解决方案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;
          }
          

          【讨论】:

            【解决方案6】:

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

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

            【讨论】:

              【解决方案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

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

              【讨论】:

              猜你喜欢
              • 2021-09-17
              • 1970-01-01
              • 2019-02-12
              • 2019-01-15
              • 2020-09-07
              • 1970-01-01
              • 2015-06-08
              • 2014-03-30
              • 2011-06-05
              相关资源
              最近更新 更多