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 相关文章推荐
js 文件引入实现代码
Apr 23 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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新手上路(十二)
2006/10/09 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
浅析php原型模式
2014/11/25 PHP
为你总结一些php信息函数
2015/10/21 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
JSON 数据格式详解
2017/09/13 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python实现读取并保存文件的类
2017/05/11 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Django配置文件代码说明
2019/12/04 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
tensorflow 模型权重导出实例
2020/01/24 Python
django queryset相加和筛选教程
2020/05/18 Python
校园摄影活动策划方案
2014/02/05 职场文书
社会调查研究计划书
2014/05/01 职场文书
应用心理学专业求职信
2014/08/04 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
react中的DOM操作实现
2021/06/30 Javascript
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python