vue-router路由懶加載和權(quán)限控制詳解
更新時(shí)間：2017年12月13日 09:20:10 作者：__Construct
這篇文章主要介紹了vue-router路由懶加載和權(quán)限控制的相關(guān)資料
vue-router路由懶加載 和權(quán)限控制,今天剛好搞了一個(gè)基于node token驗(yàn)證的小demo
所以下面介紹下，路由懶加載
1、為什么要使用路由懶加載呢
用vue.js寫單頁面應(yīng)用時(shí)，會(huì)出現(xiàn)打包后的JavaScript包非常大，影響頁面加載，我們可以利用路由的懶加載去優(yōu)化這個(gè)問題，當(dāng)我們用到某個(gè)路由后，才去加載對(duì)應(yīng)的組件，這樣就會(huì)更加高效
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、對(duì)路由鉤子進(jìn)行權(quán)限控制
//注冊(cè)全局鉤子用來攔截導(dǎo)航
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（卻無權(quán)限）作為參數(shù)，方便登錄成功后直接跳轉(zhuǎn)到該路由
});
}
}else{
next();//如果無需token,那么隨它去吧
}
});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法
Vue項(xiàng)目啟動(dòng)時(shí)報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
window.onresize在vue中只能使用一次,自適應(yīng)resize報(bào)錯(cuò)問題
這篇文章主要介紹了window.onresize在vue中只能使用一次,自適應(yīng)resize報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了在Vue中使用防抖與節(jié)流,及this指向的問題,具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了詳解從Vue-router到html5的pushState，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue頁面中實(shí)現(xiàn)平滑滾動(dòng)功能
這是一個(gè)實(shí)現(xiàn)平滑滾動(dòng)的函數(shù),可以讓頁面在滾動(dòng)到指定位置時(shí)產(chǎn)生緩動(dòng)效果,本文給大家介紹了如何在在Vue頁面中實(shí)現(xiàn)平滑滾動(dòng)功能,<BR>,文中詳細(xì)的代碼講解供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12
Vue替代vuex的存儲(chǔ)庫Pinia詳細(xì)介紹
這篇文章主要介紹了Vue替代vuex的存儲(chǔ)庫Pinia，聽說pinia與vue3更配,便開啟了vue3的學(xué)習(xí)之路，pinia 和 vuex 具有相同的功效， 是 Vue 的存儲(chǔ)庫，它允許您跨組件/頁面共享狀態(tài)2022-09-09
Vue.js每天必學(xué)之過濾器與自定義過濾器,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家介紹了代理模式在vue中的使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了Vue2.x與Vue3.x中路由鉤子的區(qū)別，分別介紹了路由鉤子的分類，路由配置守衛(wèi)鉤子以及組件內(nèi)守衛(wèi)鉤子等有需要的朋友可以借鑒參考下2021-09-09
這篇文章主要介紹了vuex中的state屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04