vue: router.beforeEach中的next使用问题, next({ ...to })

解答思路

{ ...to } 使用的是 ES2015（ES6）引入的对象展开运算符，作用是把 to 对象上的所有可枚举属性“平铺”复制到一个新的对象字面量里；如果后续不对这个新对象做任何修改，效果和直接传 to 是一样的，但如果需要在展开的基础上覆盖或新增字段，两者就会产生差异。

示例代码

router.beforeEach((to, from, next) => {
  next({ ...to, query: { ...to.query, from: "guard" } });
});

详细说明

• next(to) 直接把原始的路由对象传递下去，next 内部拿到的就是这个对象的引用。
• next({ ...to }) 会先创建一个新对象，把 to 上的属性逐一拷贝过去，这个新对象和原始 to 是不同的引用，但字段值在没有额外修改的情况下是一样的。
• 如果只是原样传递、不做任何修改，写不写展开运算符（即 next(to) 还是 next({ ...to })）在效果上没有区别；但一旦在展开的基础上新增或覆盖某些字段（比如加上额外的 query 参数），两者就会产生实质性差异——这也是为什么大家会用 { ...to, 额外字段 } 这种写法，方便在不破坏原有字段的前提下做局部调整。

小结

{ ...to } 本质是浅拷贝加可扩展，如果不修改任何字段，效果等同于直接传 to；一旦需要在原有路由信息基础上追加或覆盖字段，展开运算符就能派上用场。