vue.js $router.push中的参数字段为空

kq0g1dla  于 2023-01-21  发布在  Vue.js
关注(0)|答案(4)|浏览(119)

想想这个:

this.$root.$router.push({
    path: '/dashboard', 
    params: { errors: 'error' }, 
    query: { test: 'test' }
})

我在我的组件中使用这个来重定向到另一个URL,出现了一些错误。问题是当我想访问 Jmeter 板组件中的params字段时,它是空的。query字段工作正常。我正在尝试通过this.$route.params.errors访问它。

nwlls2ji

nwlls2ji1#

您只能将paramsnamed路径一起使用(我认为)。
示例:

//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中的值正确。

kokeuurv

kokeuurv2#

如果您 * 不 * 想使用 * 命名路由 *,可以尝试以下操作:

ES6

this.$root.$router.push({
    path: `/dashboard/${error}`, 
    query: { test }
})

ES5

this.$root.$router.push({
    path: '/dashboard/' + error, 
    query: { test: 'test' }
})
yvgpqqbh

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>

您可以像上一页一样在下一页访问它

this.$route.query.requestReservation
lymnna71

lymnna714#

在我的一个视图(组件)中,我遇到了类似的问题。我试图(通过编程)从/foo/bar导航到/foo/bar/123,但是route参数在组件的后面不可用。我的相关导航代码如下所示:

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: 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
和,将以下内容添加到组件:

beforeRouteUpdate(to, from, next) {
    if (to.params.id) {
      this.my_obj.id = to.params.id;
    }
    // Some other code specific to my app
    next();
  }

我希望这能帮助那些被类似问题困扰的人。

相关问题