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() 报错的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 详解vue-router的Import异步加载模块问题的解决方案

    1.问题现象 2.出现问题的代码点 3.替代方案: 把import() 替换成如下: Promise.resolve().then(()=>require(`@/views/${str}`)) 4.原因分析 项目在编译时,出现一个警告 这个警告的含义: require接收了一个变量,会报上面的警告,接收一个写死的字符串值时则没有警告! 我们通过控制台查看到import()对应编译过后的代码: 从上图可以看到require接收了一个变量,所以运行时出现了警告. 那这样就会报上面找不到对应的模块.

  • 通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

    懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 懒加载的方式: import Vue from 'vue' import

  • 为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题

    用过vue-router都知道它可以实现模块js的懒加载,即只有当需要时才去加载对应模块的js脚本文件,以加速主页的显示.比如只有第一次用户点击某个"用户信息"按钮或菜单时,才下载"用户信息"这个模块的js组件. 懒加载的实现,依赖与webpack下AMD模式require函数的功能.webpack会将异步require的文件生成一个独立的js文件,调用时异步下载这个js且在完成后再执行它.开发项目中实现的关键代码是: const basicInfo = { pat

  • vue-router路由懒加载和权限控制详解

    vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e

  • vue-router路由懒加载的实现(解决vue项目首次加载慢)

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的

  • vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

    此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登

  • 详解vue-router数据加载与缓存使用总结

    之前开发了一个单页面应用,按照深度,分为三层:目录页.一级子页(标签页.故事页等).二级子页(故事编辑页). 这三类页面都共享一个完整的数据model,从上级页面进入下一级页面时,能够加载相应数据:回到上一级时,数据有更新.举个栗子,从故事页点击"编辑"按钮,进入故事编辑页则默认填充点击的"编辑"按钮所对应的故事数据:而当在故事编辑页更新数据,返回到故事页时,刚刚更新的信息也能在故事页展示. 对于这项需求,我们需要解决如下几个问题: 三层页面共享数据: 进入或退回当

  • vue-router懒加载速度缓慢问题及解决方法

    懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 懒加载的方式: import Vue from 'vue' import

  • 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 =

  • CI框架自动加载session出现报错的解决办法

    很多程序员在CI中使用session的时候,开启自动加载session之后网站就报错了,具体错误信息如下:In order to use the Session class you are required to set an encryption key 下面一起来看问题解决办法. 提示信息说明:如果想用session类的话就必须要设置一个加密的密钥!那就给设置一个吧,毕竟也是出于安全考虑. 打开application/config/config.php找到Encryption Key 复制代

  • Vue Router的懒加载路径的解决方法

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的平衡点. 解决办法 .vue模块文件按需加载,其实要做到两件事情:一是标记出这是一个异步组件:二是通知webpack把该组件单独产出为一个chunk. vue的异步组件 官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个Promise,只是Promise的resolve函数的参数是常规组

  • vue实现按需加载组件及异步组件功能

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template中的代码: 这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名 <template slot-scope="scope"> <el-button type="text" size="mini" @click=&qu

  • Vue router/Element重复点击导航路由报错问题及解决

    目录 Vue router/Element重复点击导航路由报错 解决方法如下 Vue使用element-UI路由报错问题 报错代码 修改方案 Vue router/Element重复点击导航路由报错 虽然此报错并不会影响项目运行,但是作为一个强迫症的码农的确受不了error 解决方法如下 方法1:在项目目录下运行 npm i vue-router@3.0 -S 将vue-router改为3.0版本即可: 方法2:若不想更换版本解决方法 在router.js中加入以下代码就可以 记住插入的位置 c

  • create-react-app使用antd按需加载的样式无效问题的解决

    官网给出的按需加载解决方案,先安装 babel-plugin-import 因为antd默认引入样式是less,所以需要手动配置为CSS,配置方法如下: 第一种方法:在package.json中配置,这种方法成功的前提是webpack里query下配置babelrc:true, 这样就会使用babelrc文件中的配置 "babel": { "presets": [ "react-app" ], "plugins": [ [ &

  • vue中使用vant的Toast轻提示报错的解决

    目录 使用vant的Toast轻提示报错 提示信息弹出(toast) 实现过程如下 使用vant的Toast轻提示报错 记录一下今天使用vant中的Toast 轻提示,按照官方文档中的方法去使用发现报错使用不了. 文档中是这样写的 Toast.success('成功文案'); Toast.fail('失败文案'); main.js中引用vant后直接调用Toast报错. 实际使用是这样写 this.$toast.success("成功文案"); this.$toast.fail(&qu

  • vue cli2 和 cli3去掉eslint检查器报错的解决

    目录 cli2去掉eslint检查器报错 cli3去掉eslint检查器报错 vue-cli3取消eslint检查 cli2去掉eslint检查器报错 eslint在编写过程中及其严格,甚至单引号和双引号或者空格注释都会引起报错,导致项目无法正常运行 因此,只需要在build文件夹下,找到webpack.base.conf.js文件 将下面一行代码注释掉,即可正常编译了 cli3去掉eslint检查器报错 vue-cli3取消eslint检查 实际上在学习过程中,你会发现eslint 检查特别讨

  • React-router 4 按需加载的实现方式及原理详解

    React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,getComponent方法已经被移除,下面就介绍一下react-router4是入围和来实现按需加载的. 1.router3的按需加载方式 route3中实现按需加载只需要按照下面代码的方式实现就可以了. const about = (location, cb) => { require.ensure

  • react-router4按需加载(踩坑填坑)

    react-router4如何去实现按需加载Component,在router4以前,我们是使用getComponent的方式来实现按需加载的,router4中,getComponent方法已经被移除,网上有好几种方案大多都解决的不太彻底,下面我说一下我的方案: 一:创建asyncComponent.js import React, { Component } from "react"; export default function asyncComponent(importComp

随机推荐