vue router路由中的next()用法

Question

学习VUE3，在看到一些源码中，内容如下：

router.beforeEach(async (to, from, next) => {
    if (to.path === '/login') {
      next()
    } else {
         //...... 一些处理
          next({ ...to, replace: true })
        } 
    }

其中 next({...to,replace:true})做何解？

Answer 1

对象展开运算符。

const src = {
  k1: 'hello',
  k2: 123,
  k3: {},
  k4: [],
  k5: function() {}
}
const dest = [...src, { k1: 'world' }];

// 等效于：
const dest = {
  k1: 'world',
  k2: src.k2,
  k3: src.k3,
  k4: src.k4,
  k5: src.k5
}
// 注意 src 本身没有被修改，得到的 dest 是一个新的对象

当然你也可以选择使用 Object.assign 来替代。