CODEWITHSUNDEEP
javascriptroutesvue.jsdynamic-routing
Tom Franssen
Tom Franssen

Reputation: 456

VueJS routing navigation not working when on dynamic route component

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>

Upvotes: 1

Views: 1656

Answers (2)

PiotrT
PiotrT

Reputation: 151

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/

Upvotes: 2

user6748331
user6748331

Reputation:

Try exact links

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

Upvotes: 0

Related Questions