CODEWITHSUNDEEP
nuxt.js
Moshe
Moshe

Reputation: 6991

Custom Routes in NuxtJS

I am wondering how to rename routes in nuxtjs.

In particular, I have a folder called pages with a number of files in that folder (like about-us, contact-us, etc). However, I do NOT want the route to be www.mysite.com/pages/about-us, but rather www.mysite.com/about-us. That is to say, I want to remove pages from the route.

Any idea how I can do this?

Upvotes: 4

Views: 18646

Answers (8)

Simon Rosengren
Simon Rosengren

Reputation: 269

If you're looking to have different paths for different languages you can use nuxtI18n to achieve this directly in the .vue file, for example

export default {
  nuxtI18n: {
    paths: {
      en: '/about-us', // -> accessible at /about-us (no prefix since it's the default locale)
      fr: '/a-propos', // -> accessible at /fr/a-propos
      es: '/sobre'     // -> accessible at /es/sobre
    }
  }
}

For more info, see documentaion

Upvotes: 0

JOY KUMAR PAL
JOY KUMAR PAL

Reputation: 146

**If You Are In

pages Directory

Your route will be the files inside the page directory.

** Or You Can add custom routes. Instructions are listed below.......

1 . Add @nuxtjs/router dependency to your project {yarn add --dev > >@nuxtjs/router # or npm install --save-dev @nuxtjs/router}.

  1. add @nuxtjs/router to the buildModules section of nuxt.config.js.

That should work for your custom routes.js. Then you make your own routes and map any directory you want.

For More to Know. Visit https://www.npmjs.com/package/@nuxtjs/router

............ Thank you ..........................

Upvotes: 0

Harry Naruto
Harry Naruto

Reputation: 139

You can go to other route with this as easily.

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

Upvotes: -1

Rza
Rza

Reputation: 215

To customize the route path, simply, you can use extendRoutes function in the nuxt.config.js and edit the path property like this:

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'
        },
        ...
      ]
    }
  }
}

Make sure to return all of the routes (not only about page). I used console.log(routes) to know that.

Or, you can use a condition like this:

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

Upvotes: 10

Ali
Ali

Reputation: 1568

Add a extendRoutes function to the nuxt.config.js file inside the router property

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

Upvotes: 0

Nemeton
Nemeton

Reputation: 745

Well with nuxtjs, you shouldn't need to do much for routing. If it's just that you need your urls to be

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

All you need to do is, have those two .vue files direct child to pages folder Like the image below, this should do it.

enter image description here

Although I understand your question, if there's any custom functionality to manipulate routing, I'm not sure if there is anything like that.

Upvotes: 1

Ernesto Guerra
Ernesto Guerra

Reputation: 61

You should add something like this... 

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

so you could choose the path and the component

Upvotes: 1

V-SHY
V-SHY

Reputation: 4125

Refer to Routing in nuxt.js documentation page, it will automatically generate routes without pages/.

Is it possible that you have pages child folder inside the src/client/pages folder?

Upvotes: 1

Related Questions