如何在方法函数中将参数传递给 vue.js 路由器？答案

【问题标题】：How to pass parameter to vue.js router in a method function?如何在方法函数中将参数传递给 vue.js 路由器？
【发布时间】：2018-04-30 22:37:56
【问题描述】：

我正在尝试将“joke.id”作为参数发送到路由器：

edit: function(joke) {
    this.$router.push({ '/edit/' + joke.id }); 
}

相关路线为：

{path: '/edit/:id', component: editJoke, name: 'editJoke'},

但是我在控制台中得到了这个：

模块构建失败：SyntaxError: Unexpected token

this.$router.push({ '/edit/' + joke.id }); 
  |                          ^

我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

你必须绑定你的路由器参数

<router-link :to="{name:'show.user',params:{id:user.id} }">your links</router-link>

在你的索引路由器中

path:'/user/:id'

【讨论】：

【解决方案2】：

给你！

 this.$router.push({name: 'DESTINATION', params: {VAR1: 'VALUE1', VAR2:'VALUE2'}})

您可以拥有任意数量的参数。您也可以在 HTML 组件中应用相同的技术：

<router-link :to="{name: 'DESTINATION', params: {VAR1: 'VALUE1', VAR2: 'VALUE2'}}" />

只需确保目的地名称与您在路线中指定的名称相同。

您不一定非要使用 router-link，因为大多数当前组件都支持 :to 属性，尤其是 Vuetify。

【讨论】：

【解决方案3】：

您可以使用以下语法将参数传递给路由器：

edit: function(joke) {
    this.$router.push('/edit/' + joke.id)
}

如果您已命名路线，则可以改用以下语法：

edit: function(joke) {
    this.$router.push({ name: 'edit', params: { id: joke.id }})
}

阅读更多关于使用 Vue Router here 进行编程导航的信息。

【讨论】：

【解决方案4】：

push 函数内不需要大括号。你的代码应该是这样的：

this.$router.push('/edit/' + joke.id);

【讨论】：