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}
    }
  },
})

相關文章