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

【问题标题】：VueJS routing navigation not working when on dynamic route componentVueJS路由导航在动态路由组件上不起作用
【发布时间】：2018-04-10 09:55:47
【问题描述】：

在我的组件中，我有以下 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>

【问题讨论】：

您尝试导航后的网址是什么样的？

标签： javascript routing vue.js dynamic-routing

【解决方案1】：

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

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

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

【讨论】：

非常感谢！我是怎么看这个的，太明显了:-D

【解决方案2】：

尝试精确链接

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

【讨论】：