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>

Answer 1

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/