VueJS routing navigation not working when on dynamic route component

Question

In my component I have the following vue-router routes one with a dynamic event of '/event/:id'

    routes: [
        {
            path: '/',
            name: 'Dashboard',
            component: Dashboard
        },
        {
            path: '/events',
            name: 'Events',
            component: Events,
            beforeEnter: requireAuth
        },
        {
            path: '/event/:id',
            name: 'Event details',
            component: EventDetails,
            alias: 'test'
        }
    ]

When I visit an event ID url like this one: http://localhost:8080/event/59f4906d8835582773ef769a everything is fine and the event detail page is loaded. However if I try to navigate away from this component to for example the /events page the events component does not load and I stay on the same page.

The links I use to navigate away from the page are formatted with the <router-link> like this:

<router-link to="events">Events</router-link>

What does the url look like after you try to navigate?

Eric Guan
– Eric Guan

2017-10-29 08:06:14 +00:00
Commented Oct 29, 2017 at 8:06 — Eric Guan
– Eric Guan, Commented Oct 29, 2017 at 8:06

PiotrT · Accepted Answer · 2017-10-29 08:50:10Z

2

You should add / in route path.

Change this <router-link to="events">Events</router-link> to <router-link to="/events">Events</router-link>

If you still have problem, check out this example: http://jsfiddle.net/657f3twk/

edited Oct 29, 2017 at 8:50

answered Oct 29, 2017 at 8:39

PiotrT

1511 silver badge4 bronze badges

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

1 Comment

Tom Franssen Over a year ago

Thanks a lot! How did I look over this, it's so obvious :-D

user6748331 · Accepted Answer · 2017-10-29 08:23:43Z

0

Try exact links

<router-link to="/" exact>Home</router-link>
<router-link to="/events" exact>Events<router-link>
...

answered Oct 29, 2017 at 8:23

user6748331

Collectives™ on Stack Overflow

VueJS routing navigation not working when on dynamic route component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related