Vue Router issue with dynamic route

Question

I am trying to make these routes:

{
  path: '/',
  name: 'home',
  component: Home
},
{
  path: '/:username',
  name: 'login',
  component: Login
},
{
  path: '/dashboard',
  name: 'dashboard',
  component: Dashboard
}

But when I try to open /dashboard, I get Login page.

ittus · Accepted Answer · 2019-07-28 01:31:01Z

1

The order is important here. You can swap /dashboard and /:username position

[{
  path: '/',
  name: 'home',
  component: Home
},
{
  path: '/dashboard',
    name: 'dashboard',
      component: Dashboard
},
{
  path: '/:username',
  name: 'login',
  component: Login
}]

answered Jul 28, 2019 at 1:31

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Rusinas Over a year ago

Oh wow. This is just works, thank you! Is this described in docs?

moses toh Over a year ago

@ittus Maybe you can hep me. Look at this : stackoverflow.com/questions/57836601/…

Renaud · Accepted Answer · 2019-07-28 01:31:58Z

1

That's normal. Router is matching the routes from first to last. /dashboard totally matches /:username with username == 'dashboard'

You should place the login roote at the end of the array, but even better you'd prefix it to be safer (like /user/:username)

answered Jul 28, 2019 at 1:31

Renaud

1,3098 silver badges9 bronze badges

Collectives™ on Stack Overflow

Vue Router issue with dynamic route

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related