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

当我访问像这样的事件 ID url 时：http://localhost:8080/event/59f4906d8835582773ef769a 一切正常，事件详细信息页面已加载。但是，如果我尝试离开此组件导航到例如 /events 页面，则事件组件不会加载，我会停留在同一页面上。

我用来离开该页面的链接的格式为 <router-link>，如下所示：

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

Answer 1

尝试精确链接

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

Answer 2

您应该在路由路径中添加 /。

改变这个 <router-link to="events">Events</router-link> 至 <router-link to="/events">Events</router-link>

如果仍有问题，请查看此示例：http://jsfiddle.net/657f3twk/

VueJS 路由导航在动态路由组件上不起作用

VueJS routing navigation not working when on dynamic route component

javascript

routing

vue.js

dynamic-routing