关于vue-router:vuerouter相关配置

本文记录一下我在开发 vue 我的项目时，应用 vue-router 遇到过得问题。

routes

const routes = [
  {
    path: '/cardLesson',
    name: 'cardLesson',
    component: () => import( '../views/myCard/cardLesson'),
    meta: {
      auth: false,
      needPhone: false,
      keepAlive: false
    }
  },
  ...
]

导航守卫

router.beforeEach((to, from, next) => {if (to.meta && to.meta.auth) {if (!Vue.prototype.$checkLogin()) {return Vue.prototype.$bus.$emit('auth-login')
    }
    if (to.meta.needPhone && !Vue.prototype.$checkPhone()) {return Vue.prototype.$bus.$emit('auth-phone')
    }
    return next()} else {next()
  }
})

以上的配置，在进入路由前会先检测有没有权限管制，如果须要登录则会触发登录监听事件，弹出登录窗口。如果是从其余我的项目跳转到 vue 我的项目的路由，却无奈失常弹出登录窗口，因为单页面利用第一次加载，$bus 还没有注册。

解决页面加载进度条

router.beforeEach((to, from, next) => {NProgress.start();
  to.meta.keepAlive = !(to.meta && to.meta.skipCache);
  next()});

router.afterEach(() => {NProgress.done()
});

scrollBehavior

const router = new VueRouter({
  routes,
  scrollBehavior(to,from,saveTop){if(saveTop){return saveTop;}else{return {x:0,y:0}
    }
  },
})