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 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
关于vue面试题汇总
Mar 20 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
小程序实现录音上传功能
Nov 22 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
解决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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python批量图片处理简单示例
2019/08/06 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
电工技术比武方案
2014/05/11 职场文书
技术经济专业求职信
2014/09/03 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
世界环境日活动总结
2015/02/11 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python