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