router path /index throw 404 not expected to /

[alterhu2020]

Test Data:

1. Create the root home page component in pages folder ,named it as: index.vue

Steps:

1. start nuxt server, then go to page : http://localhost:3000/
2. go to page : http://localhost:3000/index

Expected result:

1. For step2 it should render the same page content as step1, go to path /

Actual result:

1. For step2 it will show as 404 exception：

404
This page could not be found.

URI Path: /index
Back to the home page

I don't want to create a new folder called index at the root pages ,any help for this ?
thanks .

_{This question is available on Nuxt.js community (#c1232)}

[pi0]

Hi. This an expected behavior (At least currently).Adding an alias for / ~> /index is not a good practice and needs creating duplicate route entries for all index.vue files in router.js.

[alterhu2020]

thanks for your quick response @pi0 ,so do you have any suggestion for this case ? I really don't want to create a same name router folder for each router path. We just want to the it could be like as following:

--  pages
--- index.vue
--- about.vue
--- contact.vue

thanks a lot, we really like the nuxtjs project.

[bayssmekanique]

As @pi0 explained, this is not ideal for many reasons, so I would recommend re-evaluating your design to avoid having duplicate routes to the same resource, but here's a solution that should work.

You could use the dynamic routing to make this work. You'd create a file called _root.vue in the pages directory (pages/_root.vue), and then in the configuration for that file declare a validate function to test that the route is index or blank. (For some reason calling the file _index.vue seems to not work)

export default {
  validate: ({ params }) => {
    return /^index$/.test(params.root) || !params.root
  }
}

[alterhu2020]

thanks @bayssmekanique ,The problem is that When i use the root path name <nuxt-link to='index'> to navigate to the root path(http://localhost:3000/) ,but it navigated to http://localhost:3000/index/ . that confused me a lot ,Why it not goes to http://localhost:3000/ ,just as the below root router definitions ? see the below generated router.js code located in place: /.nuxt/router

export function createRouter () {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,
    routes: [
		{
			path: "/",
			component: _2b8110ef,
			name: "index"
		},
		{
			path: "/uploader",
			component: _49b83161,
			name: "uploader"
		},
		{
			path: "/about",
			component: _0bc9362a,
			name: "about"
		},
		{
			path: "/login",
			component: _15ae97f4,
			name: "login"
		}
    ],
    fallback: false
  })
}

[bayssmekanique]

Sorry, I guess I completely miss-understand what you are asking. To route to the index file, you would use <nuxt-link to="/">.

[alterhu2020]

thanks @bayssmekanique , Your reminder let me to go throuth the vue-router document ,and I found that i misunderstand the to parameter in nuxt-link ,it mentioned that the parameter could be a string or a object. the string is worked for the router's path property ,but if we want to use the router's name instead of router's path ,we should define the to as a object ,like below code:

<nuxt-link :to='{name: 'index'}'></nuxt-link>

It's totally my fault. thanks for your help @bayssmekanique , @pi0

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.