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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
Bootstrap3 图片(响应式图片&图片形状)
2017/01/04 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
浅谈super-vuex使用体验
2018/06/25 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
javascript如何实现create方法
2019/11/04 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
js实现缓动动画
2020/11/25 Javascript
浅谈Python中的数据类型
2015/05/05 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python批量修改文件编码格式的方法
2018/05/31 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
产品质量承诺书范文
2014/03/27 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
美容院经理岗位职责
2014/04/03 职场文书
水利水电专业自荐信
2014/07/08 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
药房管理制度范本
2015/08/06 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书