vue-router路由懶加載 和權限控制,

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

　　

博客地址