vue-router 按需加载 component: () => import() 报错的解决

vue的单页面(SPA)项目,必然涉及路由按需的问题。

以前我们是这么做的

//require.ensure是webpack里面的,这样做会将单独拉出来作为一个chunk文件

const Login = r => require.ensure( [], () => r (require('../component/Login.vue')));

但现在vue-router的官网看看,推荐这种方式:

//vue异步组件和webpack的【代码分块点】功能结合,实现了按需加载

const App = () => import('../component/Login.vue');

可是,很多情况下,我们这么写npm run dev控制台直接报错,这是为什么呢?

Module build failed: SyntaxError: Unexpected token

原来是import这儿报错了,这就需要babel的插件了,vue-router官网上有一段提示:

如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。

至此,问题全部解决了。

如果使用vue-cli生成项目,很可能在babel-loader没有配置上面的插件,这时需要我们自己去安装此插件:

cnpm install babel-plugin-syntax-dynamic-import --save-dev

然后修改webpack的js的loader部分:

{

test: /\.js$/,

loader:'babel-loader',

options:{

plugins:['syntax-dynamic-import']

},

},

 

增加了option选项,至此,能识别我们:

const App = () => import('../component/Login.vue');

的语法了,页面出来了:

在打包的时候,发现我们如果只是这么写,出现的chunk包名字都是乱的,如果我们指定命名,该怎么办呢?webpack3提供了Magic Comments(魔法注释)

const App = () => import(/* webpackChunkName:'login'*/ '../component/Login.vue');

这样我们就为打包出来的chunk指定一个名字,最终生成login.js的chunk包。

补充知识:Vue根据是否授权,跳转不同的路由(vue-router动态路由)

功能点:项目一运行需要先请求后台,根据后台返回结果跳转对应路由,如果用户已经授权跳转首页,如果用户没有授权,跳转授权页面进行授权。

实现代码如下:

router文件夹中的index.js

import Vue from "vue";

import Router from "vue-router";

Vue.use(Router);

let router =new Router({

routes:[]

});

//全局路由钩子函数

router.beforeEach((to,from,next)=>{

//不加这个判断,路由会陷入死循环重复添加路由

if(!to.name){

alert("请上传有效的License文件,以正常使用系统功能");

next("/licenseManage");

}else{

next();

}

})

export default router;

router文件夹的accessRouters.js(定义好不同的路由)

import index from "@/views/index";

export default{

//已授权路由列表

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:{}

}

}

],

//没有授权的路由列表

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定义仓库中的变量

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定义改变状态库中authorized的值的方法并加载动态路由

import router from "@/router/index";

import accessRouters from "@/router/accessRouters";

const mutations={

setAuthorized(state,payload){

if(payload){

//已授权

//加载路由为已授权定义的路由列表并跳转/preIntegrationTest

router.addRoutes(accessRouters.hasAccessRouters);

let url=location.hash.substring(1)==='/'?'/preIntegrationTest':location.hash.substring(1);

router.push('url');

}else{

//没有授权,跳转授权页面

router.push('/licenseManage');

}

//更改状态值

state.authorized=payload;

}

}

export default mutations;

action.js请求后台接口返回结果,赋值给store状态库中的变量

const actions={

addInterceptors({state,commit}){

//响应拦截--配置请求回来的信息

state.axios.interceptors.response.use(

function(response){

// 处理响应数据

return response

},function(error){

if(error.response.status === 403){

commit("setAuthorized",false)

}

//处理响应失败

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{

//没有授权 跳转授权页面

state.authorized = false;

router.addRoutes(accessRouters.noAccessRouters);

router.push("/licenseManage");

}

}).catch(function(error){

console.log(error)

//没有授权 跳转授权页面

state.authorized = false;

router.addRoutes(accessRouters.noAccessRouters);

router.push("/licenseManage");

})

}

}

export default actions;

以上这篇vue-router 按需加载 component: () => import() 报错的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是 vue-router 按需加载 component: () => import() 报错的解决 的全部内容, 来源链接: utcz.com/p/218038.html

回到顶部