Vue-router: missing param for named route "notfound": Expected "0" to be defined

[Sarke]

I got this quite cryptic error message and I'm not sure what to make of it.

Relevant trace

assert          @ vue-router.js?e71f:140
fillParams      @ vue-router.js?e71f:1158
match           @ vue-router.js?e71f:1007
transitionTo    @ vue-router.js?e71f:1223
replace         @ vue-router.js?e71f:1628
replace         @ vue-router.js?e71f:1801
created         @ edit.vue?dc4c:116

Offending code in edit.vue

this.$router.replace({
    name: 'notfound',
})

Relevant routes

{
    path: '*',
    name: 'notfound',
    component: require('./views/NotFound.vue'),
},

NotFound.vue

<script>
export default {
    data() {
        return {
        }
    },
}
</script>

[fnlctrl]

Hi, thanks for filling this issue. Please follow the Issue Reporting Guidelines and provide a live example on jsfiddle, codepen etc. Thanks!

[Sarke]

Your link is 404, and I can't fit the entire app in a fiddle.

[fnlctrl]

Sorry about the CONTRIBUTING.md being missing... We'll fix that.

The example should only contain the minimal code that will reproduce the error, so you don't need to fit the entire app in a fiddle.

[fnlctrl]

Closing due to inactivity.

[andredewaard]

Same error. If i go to a route with params. And there is no blog post with dat param i want to show a 404 page. by doing: this.$router.push({ name: 'pagenotfound' }) i get the same error as described above

[tomoki7]

same here

[polunzh]

Same error, I don't know why;
but I fixed it with the following code:

routes: [{
        name: '404',
        path: '/404',
        component: NotFound
    }, {
        path: '*',
        redirect: '404'
    }
]

[skyrpex]

I have the same error:

// routes.js
export default [
  {
    path: '/',
    name: 'home',
    component: HomePage,
  },
  {
    path: '*',
    name: 'errors.404',
    component: Error404Page,
  },
];

You need at least two components in order to trigger the error.

[posva]

The problem is that you cannot replace the current view with a named route that has an asterisk path, what you have to do is replace with an explicit path that will match the path like notfound

[Mouvedia]

replace

      path: '*',
      alias: '/404'

by

      path: '/404',
      alias: '*'

[amfische]

Is there a way to redirect a params that doesn't exist to an error page without changing the URL? I would like to keep the URL as user entered.

example.com/user/doesnotexist redirects to an error component but keeps URL as example.com/user/doesnotexit instead of example.com/404-notfound

[skyrpex]

@amfische your page component should be able to render an error page without redirecting, then.

[amfische]

@skyrpex Yes that's true, I can put some logic into my page component to render an error page, but I was hoping I could reuse my notFound component in this case instead of duplicating the code.

I have a general error component for nonexistent urls:
{ path: '*', component: notFound, name: '404' }

It would be nice if I could reuse this for router params that don't exist without changing the URL. I tried playing with vue-router alias's but I don't think it will do what I'm trying to do.

[skyrpex]

I don't think that's possible... What I did once was redirect to a generic error page, but passing the invalid URL as parameter so I could display information about the other page.

[Splean]

The fact is that when you do redirect to an asterisk, the router does not know which path should be in the location. You must pass this path yourself, eg:

push({ name: '404', params: { '0': 'somePath'} })

Here is a piece of my code from route guard for subdomains support, maybe useful

/**
 * Check hostname.
 *  
 * @param  {string} hostname 
 * @param  {Array} routes
 * @return {Array}
 */
function hostGuard(hostname, routes) {
    return beforeEnter(routes, (to, from, next) => {
        if(location.hostname.split('.').shift() === hostname) {
            next()
        }
        else {
            next({ name: '404', params: { '0': to.path } })
        }
    })
}

[timbuckiii]

Removing 'name' from the object worked for me!

[wenfangdu]

@amfische @skyrpex
Render NotFound component without changing the URL, use:
next({ name: 'NotFound', params: [to.path], replace: true })

[tenadolanter]

@amfische @skyrpex
Render NotFound component without changing the URL, use:
next({ name: 'NotFound', params: [to.path], replace: true })

skip to router name，and replace the url, done ！