vue.js v-link无效

Question

我在我的vue.js应用程序中有这样的路线：

/bewerk/rit/:rideId

所以当我在我的vue.js webapp中链接到这个url时：

    <a v-link="{ name: 'bewerk/rit', params: { rideId: ride.id }}" class="btn-edit">Bewerk</a>

我收到错误：

main.js:4043 Uncaught Error: There is no route named /bewerk/rit/

有什么问题？

Answer 1

对于Vue 1.x和Vue-router 0.7：

您正在传递路线的路径作为名称。为您的路线提供名称属性＆＃39; / bewerk / rit /：rideId＆＃39;。 例如：

router.map({
  '/bewerk/rit/:rideId': {
    name: 'bewerk_rit', // give the route a name
    component: { ... }
   }
})

在你的HTML中：

<a v-link="{ name: 'bewerk_rit', params: { rideId: ride.id }}">Bewerk</a>

参考：https://github.com/vuejs/vue-router/blob/1.0/docs/en/named.md

更新：对于Vue 2.0和Vue-Router 2.0：

<router-link :to="{ name: 'bewerk_rit', params: { rideId: ride.id }}">
  Bewerk       
</router-link>

参考：https://router.vuejs.org/en/essentials/named-routes.html

Answer 2

另一种方法是使用path：

<a v-link="{ path: '/bewerk/rit/' + ride.id }">Bewerk</a>