vue-router路由懶加載 和權限控制,今天剛好搞了一個基于node token驗證的小demo

所以下面介紹下，路由懶加載

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。