$router.push 中的 Params 字段为空答案

【问题标题】：Params field is empty in $router.push$router.push 中的 Params 字段为空
【发布时间】：2017-04-02 12:26:54
【问题描述】：

考虑一下：

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

我在我的组件中使用它来重定向到另一个 URL，并且发生了一些错误。问题是当我想访问仪表板组件中的params 字段时，它是空的。 query 字段运行良好。我正在尝试通过this.$route.params.errors 访问它。

【问题讨论】：

标签： vue.js url-parameters vue-resource vue-router

【解决方案1】：

您只能将params 与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 中具有正确的值。

【讨论】：

你知道这个限制的原因是什么吗？
悲剧性的限制。
真是个难题……仅仅推送对象中的路由路径和参数是不够的

【解决方案2】：

如果你不想想使用命名路线，你可以试试这个：

ES6

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

ES5

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

【讨论】：

查询可能无法处理像 props 这样的对象（未经测试）

【解决方案3】：

在我的一个观点（组件）中，我遇到了类似的问题。我试图（以编程方式）从/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);
      });
}

下面引用的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();
  }

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

【讨论】：