Vue Router Redirect Named Component Not Missing Params?

Question

I'm trying to redirect users that go to '/' to a specific component based on its name.

{
    path: '/',
    redirect: to => {
        if (!localStorage.getItem('quizlogin')) {
            return {
                name: 'login'
            }
        } else {
            return {
                name: 'creatingquiz'
            }
        }
    }
},

When the named route creatingquiz is loaded it provides path: userUrlName + '/creatingquiz', but for some reason on redirect it doesn't understand that.

I get the warning "[vue-router] missing param for named route "creatingquiz": Expected "userName" to be defined"

What am I missing? I've had no issues routing using {name:<route-name>, params:{username:<blah>}}

The warning means that you are returning only the name of the route in your arrow function - but VueRouter expects you to also return a params object with userName attribute inside. — IVO GELOV
How would that look? Also when I am redirected the URL is not updating to reflect that change. This is the only instance I've seen it not update the URL. — Andrew Humphries
It should be return { name: 'creatingquiz': params: { userName: 'foo' } }. — User 28
Cool it worked. That solution wasn't very clear in the docs so I appreciate your help. — Andrew Humphries

Andrew Humphries Andrew Humphries · Accepted Answer · 2020-07-22T14:41:25

0

votes

The solution is to set the return to an object that has params:{key:value}

Vue Router Redirect Named Component Not Missing Params?

1 Answers