javascript - 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="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>
...