vue-router 로 케 일 로드 와 권한 제어 에 대한 자세 한 설명

1464 단어 vuerouter루트 게 으 름 로드권한 제어
vue-router 로 케 일 로드 와 권한 제어,오늘 마침 node token 인증 을 기반 으로 한 작은 demo 를 만 들 었 습 니 다.
그래서 다음은 게 으 른 로 딩 을 소개 합 니 다.
1.왜 게 으 른 로 딩 을 사용 합 니까?
vue.js 로 단일 페이지 를 작성 할 때 포 장 된 자바 스 크 립 트 패키지 가 매우 커서 페이지 로 딩 에 영향 을 줄 수 있 습 니 다.우 리 는 경로 의 게 으 른 로 딩 을 이용 하여 이 문 제 를 최적화 시 킬 수 있 습 니 다.우리 가 특정한 경 로 를 사용 한 후에 야 해당 하 는 구성 요 소 를 불 러 올 수 있 습 니 다.그러면 더욱 효율 적 입 니 다.
2.용법

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
meta: {
requiresAuth: true
},
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }
 ]
})
3.경로 갈고리 에 대한 권한 제어

//            

router.beforeEach((to, from, next) => {
 //  store   token
 let token = store.state.token;
 //          requiresAuth
 if(to.meta.requiresAuth){
  if(token){
   next();
  }else{
   next({
    path: '/login',
    query: { redirect: to.fullPath } 
//         path（    ）    ，               
   });
  }
 
 }else{
  next();//    token,      
 }
});
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
경 동 속보 가 위로 굴 러 가 는 실례 를 모방 하 다
laravel 5 템 플 릿 테마 기능 구현(계속)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage