Навигация по маршрутизации VueJS не работает при использовании динамического компонента маршрута

Question

В моем компоненте у меня есть следующие маршруты vue-router один с динамическим событием '/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'
        }
    ]

Когда я посещаю URL-адрес события, как этот: http://localhost:8080/event/59f4906d8835582773ef769a все хорошо, и страница с информацией о событии загружена. Однако, если я пытаюсь перейти от этого компонента, например, к странице /events, компонент событий не загружается, и я остаюсь на той же странице.

Ссылки, которые я использую для перехода со страницы, отформатированы с помощью <router-link> как это:

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

Answer 1

Вы должны добавить / в пути следования.

Изменить это <router-link to="events">Events</router-link>в <router-link to="/events">Events</router-link>

Если у вас все еще есть проблема, посмотрите этот пример: http://jsfiddle.net/657f3twk/

Answer 2

Попробуйте точные ссылки

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