2017-10-29 306 views
0

在我的部分,我有以下VUE路由器路由一个与'/event/:id'VueJS路由导航不工作的动态路由组件时

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> 
+0

什么是URL看起来像你尝试导航后? –

回答

1

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

更改此 <router-link to="events">Events</router-link><router-link to="/events">Events</router-link>

如果仍然有问题,看看这个例子:http://jsfiddle.net/657f3twk/

+0

非常感谢!我是如何看待这一点的,这很明显:-D –

0

尝试精确链接

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