vue router.replace 根据输入对象的组装方式表现不同

Question

我在使用 Vue 路由器时遇到了一些奇怪的行为，路由器的行为会根据其输入对象的组装方式而有所不同。下面的代码示例是组件 'methods' 属性的一个例外。有关详细信息，请参阅我的代码示例中的注释。

switchLocale(newLocale) {
                // this solution works
                const route = {
                    name: this.$route.name,
                    query: {locale: newLocale},
                    params: this.$route.params,
                };
                console.log(JSON.stringify(route));
                // {"name":"v.support.help","query":{"locale":"en"},"params":{}}
                this.$router.replace(route);

                // this solution does not change the route. I would expect it to work exactly like the solution above
                /*
                const {name, query, params} = this.$route;
                let route = {name, query, params};
                route.query.locale = newLocale;
                console.log(JSON.stringify(route));
                // {"name":"v.support.help","query":{"locale":"en"},"params":{}}
                this.$router.replace(route);
                */
            }

什么会导致这种情况发生？

Answer 1

在您的第二个代码中，您直接改变 this.$route.query 对象并将其传递给 this.$router.replace。我猜 vue-router 将无法检测到查询是否已更改，因为您改变了 vue-router 的内部状态。

不要改变 this.$route 对象（或与此相关的任何 Vue 内部状态），否则事情可能无法正常工作。

如果您想在引入或更改另一个查询参数的同时保留现有的查询参数，那么您可以这样做：

this.$router.replace({
  query: Object.assign({}, this.$route.query, { locale: newLocale }),
  // No need to specify route name and params, they will be preserved
});

vue router.replace 根据输入对象的组装方式表现不同

vue router.replace acts differently based on how input object is assembled

javascript

ecmascript-6

vue.js

vue-router