search

Home  >  Q&A  >  body text

When using nuxt2 I need /index as part of the URL

Task request path rendering xxx.com/index/news, xxx.com/index/User For this effect, I set the file tree to:

pages/
--| index/
-----| News/
-------| index.vue
-----| User/
-------| index.vue
--| index.vue

But I cannot successfully jump to other pages except the root directory.

What do I need to do to make the path of the web page display the desired effect?

P粉635509719P粉635509719511 days ago693

reply all(1)I'll reply

  • P粉486138196

    P粉4861381962023-09-13 10:09:15

    The

    home page (located in the root path) can safely be named index.vue, there is no other way to bind the page to the / path.

    But the problem is indeedYou cannot have a page and a folder with the same name at the same time. They will overlap.

    The solution could be to use a custom route in nuxt.config.js to map the root path / to your homepage:

    router: {
      extendRoutes (routes, resolve) {
         routes.push(
            {
              name: 'index_home',
              path: '/',
              component: resolve(__dirname, 'pages/home.vue')
            },
         )
      }
    },
    

    Seenuxt.config.js/routerDocumentation

    Note: You can also delete the automatically created /home route from here, it will be in the routes array.

    reply
    0
  • Cancelreply