vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決
vue的單頁(yè)面(SPA)項(xiàng)目,必然涉及路由按需的問(wèn)題。
以前我們是這么做的
//require.ensure是webpack里面的,這樣做會(huì)將單獨(dú)拉出來(lái)作為一個(gè)chunk文件
const Login = r => require.ensure( [], () => r (require('../component/Login.vue')));
但現(xiàn)在vue-router的官網(wǎng)看看,推薦這種方式:
//vue異步組件和webpack的【代碼分塊點(diǎn)】功能結(jié)合,實(shí)現(xiàn)了按需加載
const App = () => import('../component/Login.vue');
可是,很多情況下,我們這么寫(xiě)npm run dev控制臺(tái)直接報(bào)錯(cuò),這是為什么呢?
Module build failed: SyntaxError: Unexpected token
原來(lái)是import這兒報(bào)錯(cuò)了,這就需要babel的插件了,vue-router官網(wǎng)上有一段提示:
如果您使用的是 Babel,你將需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正確地解析語(yǔ)法。
至此,問(wèn)題全部解決了。
如果使用vue-cli生成項(xiàng)目,很可能在babel-loader沒(méi)有配置上面的插件,這時(shí)需要我們自己去安裝此插件:
cnpm install babel-plugin-syntax-dynamic-import --save-dev
然后修改webpack的js的loader部分:
{
test: /\.js$/,
loader:'babel-loader',
options:{
plugins:['syntax-dynamic-import']
},
},
增加了option選項(xiàng),至此,能識(shí)別我們:
const App = () => import('../component/Login.vue');
的語(yǔ)法了,頁(yè)面出來(lái)了:

在打包的時(shí)候,發(fā)現(xiàn)我們?nèi)绻皇沁@么寫(xiě),出現(xiàn)的chunk包名字都是亂的,如果我們指定命名,該怎么辦呢?webpack3提供了Magic Comments(魔法注釋?zhuān)?/p>
const App = () => import(/* webpackChunkName:'login'*/ '../component/Login.vue');
這樣我們就為打包出來(lái)的chunk指定一個(gè)名字,最終生成login.js的chunk包。
補(bǔ)充知識(shí):Vue根據(jù)是否授權(quán),跳轉(zhuǎn)不同的路由(vue-router動(dòng)態(tài)路由)
功能點(diǎn):項(xiàng)目一運(yùn)行需要先請(qǐng)求后臺(tái),根據(jù)后臺(tái)返回結(jié)果跳轉(zhuǎn)對(duì)應(yīng)路由,如果用戶(hù)已經(jīng)授權(quán)跳轉(zhuǎn)首頁(yè),如果用戶(hù)沒(méi)有授權(quán),跳轉(zhuǎn)授權(quán)頁(yè)面進(jìn)行授權(quán)。
實(shí)現(xiàn)代碼如下:
router文件夾中的index.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
let router =new Router({
routes:[]
});
//全局路由鉤子函數(shù)
router.beforeEach((to,from,next)=>{
//不加這個(gè)判斷,路由會(huì)陷入死循環(huán)重復(fù)添加路由
if(!to.name){
alert("請(qǐng)上傳有效的License文件,以正常使用系統(tǒng)功能");
next("/licenseManage");
}else{
next();
}
})
export default router;
router文件夾的accessRouters.js(定義好不同的路由)
import index from "@/views/index";
export default{
//已授權(quán)路由列表
hasAccessRouters:[
{
path:"/",
name:"index",
component:index,
redirect:"preIntegrationTest",
children:[
{
path:"/preIntegrationTest",
name:"preIntegrationTest",
components:{
listPage:resolve =>{
require(["@/views/pages/preIntegrationTest"],resolve)
}
},
props:{}
},{
path:"/about",
name:"about",
components:{
listPage:resolve =>{
require(["@/views/pages/about"],resolve)
}
},
props:{}
},{
path:"/help",
name:"help",
components:{
listPage:resolve =>{
require(["@/views/pages/help"],resolve)
}
},
props:{}
}
}
],
//沒(méi)有授權(quán)的路由列表
noAccessRouters:[
{
path:"/",
name:"index",
component:index,
redirect:"licenseManage",
children:[
{
path:"/licenseManage",
name:"licenseManage",
components:{
listPage:resolve =>{
require(["@/views/systemSetting/licenseManage"],resolve)
}
},
props:{}
}
}
]
}
]
}
store中的index.js定義倉(cāng)庫(kù)中的變量
import Vue from "vue";
import Vuex from "vuex";
import mutations from "./mutations";
import actions from "actions";
Vue.use(Vuex);
const store = new Vuex.store({
state:{
axios:axios.create({baseURL:"",transformRequest:[]}),
authorized:false
},
getters:{},
mutations,
actions
});
export default store;
mutation.js定義改變狀態(tài)庫(kù)中authorized的值的方法并加載動(dòng)態(tài)路由
import router from "@/router/index";
import accessRouters from "@/router/accessRouters";
const mutations={
setAuthorized(state,payload){
if(payload){
//已授權(quán)
//加載路由為已授權(quán)定義的路由列表并跳轉(zhuǎn)/preIntegrationTest
router.addRoutes(accessRouters.hasAccessRouters);
let url=location.hash.substring(1)==='/'?'/preIntegrationTest':location.hash.substring(1);
router.push('url');
}else{
//沒(méi)有授權(quán),跳轉(zhuǎn)授權(quán)頁(yè)面
router.push('/licenseManage');
}
//更改狀態(tài)值
state.authorized=payload;
}
}
export default mutations;
action.js請(qǐng)求后臺(tái)接口返回結(jié)果,賦值給store狀態(tài)庫(kù)中的變量
const actions={
addInterceptors({state,commit}){
//響應(yīng)攔截--配置請(qǐng)求回來(lái)的信息
state.axios.interceptors.response.use(
function(response){
// 處理響應(yīng)數(shù)據(jù)
return response
},function(error){
if(error.response.status === 403){
commit("setAuthorized",false)
}
//處理響應(yīng)失敗
return Promise.reject(error)
}
)
},
setAuthorized({dispatch,state}){
dispatch("addInterceptors");
state.axios.get('url****').then(function(response){
if(response.data.code === "1"){
state.authorized = true;
router.addRoutes(accessRouters.hasAccessRouters);
let url=location.hash.substring(1)==="/"?"/preIntegrationTest":location.hash.substring(1);
router.push(url);
}else{
//沒(méi)有授權(quán) 跳轉(zhuǎn)授權(quán)頁(yè)面
state.authorized = false;
router.addRoutes(accessRouters.noAccessRouters);
router.push("/licenseManage");
}
}).catch(function(error){
console.log(error)
//沒(méi)有授權(quán) 跳轉(zhuǎn)授權(quán)頁(yè)面
state.authorized = false;
router.addRoutes(accessRouters.noAccessRouters);
router.push("/licenseManage");
})
}
}
export default actions;
以上這篇vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
elementPlus中的Autocomplete彈出層錯(cuò)位問(wèn)題解決分析
這篇文章主要介紹了elementPlus中的Autocomplete彈出層錯(cuò)位問(wèn)題解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽(tīng)器的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽(tīng)器的實(shí)現(xiàn)方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解
這篇文章主要介紹了vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
Vue.js實(shí)現(xiàn)的計(jì)算器功能完整示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)的計(jì)算器功能,結(jié)合完整實(shí)例形式分析了vue.js響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)基本的數(shù)值運(yùn)算相關(guān)操作技巧,可實(shí)現(xiàn)四則運(yùn)算及乘方、開(kāi)方等功能,需要的朋友可以參考下2018-07-07
vue?elementui?大文件進(jìn)度條下載功能實(shí)現(xiàn)
本文介紹了如何使用下載進(jìn)度條來(lái)展示下載進(jìn)度的方法,并展示了相關(guān)的效果圖,結(jié)合實(shí)例代碼介紹了vue?elementui?大文件進(jìn)度條下載的方法,感興趣的朋友一起看看吧2025-01-01
VUE.CLI4.0配置多頁(yè)面入口的實(shí)現(xiàn)
這篇文章主要介紹了VUE.CLI4.0配置多頁(yè)面入口的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11

