$router.push中的Params字段为空

Question

考虑这个：

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

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

- Jozef Cipa

Answer 1

你只能在命名路径中使用params（我想是这样的）。

例子：

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

- euvl

---

你知道这个限制的原因吗？ - andresgottlieb

悲惨的限制。 - zrooda

真是个坑啊...仅仅将路由路径和参数推入对象中是不够的。 - Akin Hwan

这个解释不遵循官方https://router.vuejs.org/guide/essentials/named-routes.html中的介绍。我认为这是Vuejs的一个错误。 - Jiancong

这个怎么样？$router.currentRoute.params.id？它只能在带有:to属性的按钮中使用，用this.$router.push不起作用。 - Yogi Arif Widodo

Answer 2

如果您不想使用命名路由，可以尝试这个：

ES6

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

ES5

->

ES5

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

- Rob

---

查询可能不会处理像 props 这样的对象（尚未测试）。 - jean d'arme

Answer 3

如果您想使用查询参数发送参数，可以使用以下语法。

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

- Abdullah Zafar

Answer 4

我遇到了类似的问题，其中在我的一个视图（组件）中。我试图从/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() 钩子中加载数据将无法接收路由参数的值。我的失败的 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);
      });
}

解决方案在以下引用的这里的第三个注释中指出：

注意：如果目标与当前路由相同，只有参数发生变化（例如从一个配置文件转到另一个/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();
  }

我希望这能帮助到遇到类似问题的人。

- b.sodhi