vue项目中的导航守卫beforeEach问题

在一个小的demo中使用了导航守卫来做权限控制时出现了一个问题：
在hash模式下导航能够成功拦截，但是当切换成history模式时发现，直接在地址栏中输入路径回车，导航守卫不能成功拦截，刷新不能够执行导航守卫的代码块。

造成原因：

原本代码：

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})
router.beforeEach((to, from, next) => {
//代码块
})

可以发现，根实例的挂载在导航守卫之前

解决方法：

将根实例的挂载放在导航守卫之后