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网址时：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>
...

在动态路由组件上，VueJS路由导航无法正常工作

2 个答案: