vue-router hash 和 history 使用next(地址)区别

哈希模式

const router = new Router({
  routes: []
})

哈希URL： http://xxx:8080/#/

router.beforeEach((to, from, next) => {
  iView.LoadingBar.start() // iview 进度条开始
  if (token && to.path === '/login') {
    console.log('已经登录，不能访问登录页')
    next({..from})
    return
  }
  next()
})

router.afterEach((to, from) => {
  console.log('after')
  iView.LoadingBar.finish() // iview 进度条结束
})

场景描述：当用户已经登录了在手动的修改URL跳转到login页面，此时在路由beforeEach() 中手动修改跳转到from页面，不让用户跳转到login页面

http://xxx:8080/#/ 手动修改URL http://xxx:8080/#/login
执行结果：

before
已经登录，不能访问登录页

// 执行beforeEach(),此时用户已经登录会执行next({...from}),重定向地址，不会执行afterEach(), 因此进度条不会结束因为没有执行iView.LoadingBar.finish()，若使用该模式需要在next({...from})后面添加iView.LoadingBar.finish()结束进度条

history 模式

const router = new Router({
  mode: 'history',
  routes: []
})

history URL: http://xxx:8080/

http://xxx:8080/ 手动修改URL http://xxx:8080/login
执行结果：

before
已经登录，不能访问登录页
before
after

// 执行beforeEach(), 此时用户已经登录执行next({...from}),此时重新修改地址重新执行beforeEach(), 后再执行afterEach(), 此时会触发进度条结束事件