vue-router相關配置

來了老弟 發表於 2022-05-19
Vue
本文記錄一下我在開發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}
    }
  },
})