vue-routerルートの怠惰なロードと権限制御の詳細


vue-routerルートの怠惰なロードと権限制御は、今日はちょうどnode tokenに基づいて検証されたデモを行いました。
だから、以下の紹介では、ルーティングは怠惰にロードされます。
1、なぜルーティングを使って怠惰にロードするのですか?
vue.jsを使って単一ページのアプリケーションを書くと、パッケージ化されたJavaScriptパッケージが非常に大きくなります。ページのロードに影響を与えます。私たちはルートの怠惰なロードを利用してこの問題を最適化できます。私たちはあるルートを使ってから対応するコンポーネントをロードします。そうすると、より効率的になります。
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,      
 }
});
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。