想想这个:
this.$root.$router.push({ path: '/dashboard', params: { errors: 'error' }, query: { test: 'test' } })
我在我的组件中使用这个来重定向到另一个URL,出现了一些错误。问题是当我想访问 Jmeter 板组件中的params字段时,它是空的。query字段工作正常。我正在尝试通过this.$route.params.errors访问它。
params
query
this.$route.params.errors
nwlls2ji1#
您只能将params与named路径一起使用(我认为)。示例:
named
//route (in your router file should have "name") { path: '/errors', name: 'EXAMPLE', component: ... } //navigating this.$router.push({ name: 'EXAMPLE', params: { errors: '123' } });
现在,this.$route.params中的值正确。
this.$route.params
kokeuurv2#
如果您 * 不 * 想使用 * 命名路由 *,可以尝试以下操作:
ES6
this.$root.$router.push({ path: `/dashboard/${error}`, query: { test } })
ES5
this.$root.$router.push({ path: '/dashboard/' + error, query: { test: 'test' } })
yvgpqqbh3#
如果要将参数与查询参数一起发送,可以使用如下语法
this.$router.push({ path: this.localePath(`/bookings/${requestReservation?.attributes?.booking_id}`), query: { requestReservation: requestReservation } })
您可以像这样在下一页访问它
this.$route.query.requestReservation
如果你想把它从nuxt-link发送出去,而不是像这样的语法
<nuxt-link :to="{ path: '/bookings/'+ requestReservation.attributes.booking_id, query: { requestReservation } }"> Booking </nuxt-link>
您可以像上一页一样在下一页访问它
lymnna714#
在我的一个视图(组件)中,我遇到了类似的问题。我试图(通过编程)从/foo/bar导航到/foo/bar/123,但是route参数在组件的后面不可用。我的相关导航代码如下所示:
/foo/bar
/foo/bar/123
methods: { save_obj() { let vm = this; // Make AJAX call to save vm.my_obj, and on success do: let v = `${vm.$route.path}/${vm.my_obj.id}`; console.log("Loading view at path: "+v); vm.$router.push({ path: v }); }, ... }
它将打印预期的日志(例如,在路径:/foo/bar/112),但是,在created()钩子中加载数据时不会收到route param的值。我失败的created()代码如下所示:
created()
created: function() { console.log("Loading object details."); let vm = this; let cid = vm.$route.params.id; // <---- This was the problem vm.$http.get('api/'+cid) .then(function (res) { if (res.data.status == "OK") { vm.my_obj = res.data.body; } else { vm.setStatusMessage(res.data.body); } }) .catch(function (error) { console.log(error); vm.setStatusMessage("Error: "+error); }); }
该解决方案如以下引用的the third note here所示:注意:如果目的地与当前路由相同,并且只有参数发生变化(例如,从一个配置文件到另一个配置文件/users/1 -〉/users/2),则必须使用beforeRouteUpdate来响应变化(例如,获取用户信息)。我必须在组件中执行以下操作:将created()中的let cid = vm.$route.params.id;行更改为let cid = vm.course.id和,将以下内容添加到组件:
let cid = vm.$route.params.id;
let cid = vm.course.id
beforeRouteUpdate(to, from, next) { if (to.params.id) { this.my_obj.id = to.params.id; } // Some other code specific to my app next(); }
我希望这能帮助那些被类似问题困扰的人。
4条答案
按热度按时间nwlls2ji1#
您只能将
params
与named
路径一起使用(我认为)。示例:
现在,
this.$route.params
中的值正确。kokeuurv2#
如果您 * 不 * 想使用 * 命名路由 *,可以尝试以下操作:
ES6
ES5
yvgpqqbh3#
如果要将参数与查询参数一起发送,可以使用如下语法
您可以像这样在下一页访问它
如果你想把它从nuxt-link发送出去,而不是像这样的语法
您可以像上一页一样在下一页访问它
lymnna714#
在我的一个视图(组件)中,我遇到了类似的问题。我试图(通过编程)从
/foo/bar
导航到/foo/bar/123
,但是route参数在组件的后面不可用。我的相关导航代码如下所示:它将打印预期的日志(例如,在路径:/foo/bar/112),但是,在
created()
钩子中加载数据时不会收到route param的值。我失败的created()
代码如下所示:该解决方案如以下引用的the third note here所示:
注意:如果目的地与当前路由相同,并且只有参数发生变化(例如,从一个配置文件到另一个配置文件/users/1 -〉/users/2),则必须使用beforeRouteUpdate来响应变化(例如,获取用户信息)。
我必须在组件中执行以下操作:
将
created()
中的let cid = vm.$route.params.id;
行更改为let cid = vm.course.id
和,将以下内容添加到组件:
我希望这能帮助那些被类似问题困扰的人。