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


Posted in Javascript onSeptember 22, 2020

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');

的语法了,页面出来了:

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

在打包的时候,发现我们如果只是这么写,出现的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() 报错的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
深入理解(function(){... })();
Aug 16 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
使用JS动态显示文本
Sep 09 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 #Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 #Javascript
小程序实现录音功能
Sep 22 #Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 #Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 #Javascript
JS实现无限轮播无倒退效果
Sep 21 #Javascript
js+canvas绘制图形验证码
Sep 21 #Javascript
You might like
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
python实现linux下使用xcopy的方法
2015/06/28 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Python接口开发实现步骤详解
2020/04/26 Python
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
生产操作工岗位职责
2014/09/16 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
银行授权委托书范本
2014/10/04 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
教师听课评语大全
2014/12/31 职场文书
涨价通知怎么写
2015/04/23 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js