vue-router에서 경로의 지연 로딩을 구현하는 방법

이 글에서는 주로 vue-router 라우팅의 지연 로딩 및 권한 제어에 대한 정보를 소개합니다

vue-router 지연 로딩 및 권한 제어 오늘은 노드 토큰 검증을 기반으로 한 작은 데모를 만들었습니다

그럼 아래에서 소개하겠습니다. 경로의 지연 로딩

1. 경로의 지연 로딩을 사용하는 이유

vue.js로 단일 페이지 애플리케이션을 작성할 때 패키지된 JavaScript 패키지는 매우 커서 페이지 로딩에 영향을 미칠 수 있습니다. 이 문제를 최적화하기 위해 특정 경로를 사용할 때 해당 구성 요소를 로드하면 더욱 효율적입니다

2. Usage

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,那么随它去吧
 }
});

위는 다음과 같습니다. 제가 정리한 내용이 모두를 위해, 앞으로도 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

JS를 사용하여 포커스 맵 효과를 얻는 방법

JQUERY를 사용하여 여러 AJAX 요청을 구현하는 방법

JavaScript에서 반복되는 요소의 발생 횟수 계산

관련 데이터 캡슐화 및 제출 과정

위 내용은 vue-router에서 경로의 지연 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!