CODEWITHSUNDEEP
vue.jsvuejs2vue-router
Andrew Rusinas
Andrew Rusinas

Reputation: 1064

Vue Router issue with dynamic route

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.

Upvotes: 0

Views: 114

Answers (2)

Renaud
Renaud

Reputation: 1300

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)

Upvotes: 1

ittus
ittus

Reputation: 22403

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
}]

Upvotes: 1

Related Questions