在使用懒加载方式引入子路由vue文件，有时会报错！！！

最新推荐文章于 2021-09-03 10:59:11 发布
最新推荐文章于 2021-09-03 10:59:11 发布
阅读量269 收藏
点赞数 1
分类专栏： 前端 # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45773503/article/details/113761222
版权
前端 同时被 2 个专栏收录
150 篇文章 5 订阅
订阅专栏
Vue
15 篇文章 0 订阅
订阅专栏

在这里插入图片描述
这报的错！！！ 就离谱！！！

Uncaught SyntaxError: Unexpected token '<'

我在home中配置了两个子路由叫HomeNews和HomeMessage
在这里插入图片描述
并通过懒加载的方式将其引入了router下的index.js
在这里插入图片描述
正确的操作！！！

没错浏览器有时候也会正常的显示正常的跳转，但是跳着跳着他就不正常了。

One Month Later

我改了它引入的方式之后，就再没报过错了。（不知原理）

import HomeMessage from '../views/HomeMessage';
import HomeNews from "../views/HomeNews";

可能学的还不够多，应该还有其他方法解决，还请大佬们指教

最后记得重新npm run serve一下！！！

~嘘~禁止想象~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现路由懒加载及组件懒加载的方式
10-16
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下
vue 切换路由时发生Loading chunk xx failed.错误
qq_38870665的博客
02-01 1728
由于在使用前进行了打包，在vue.config.js里面配置了publicPath:'./', 这里在路由跳转的时候就出现了错误。当然每个项目可以有所不同，我们在这里进行了一个判断： publicPath:process.env.NODE_ENV==='production'?'./':'/', 这样问题就解决了，当然有一些系统则是和这个配置相反，具体情况具体分析。 ...
vue动态路由懒加载报错问题
wzp6010625的博客
04-25 1560
一般路由配置是这样的，用import实现懒加载 export default new Router({ // mode: "history", base: "/meizu-shop/", routes: [ {path: "/home", component: ()=> import('@/views/Home'), name: "home" },...
vue中使用import路由懒加载报错解决方法
weixin_43961899的博客
08-30 3228
一般情况下都会正常运行，但当我们运行npm run dev时却报错 原因是import属于异步引用组件，需要babel-loader处理 所以我们需要安装 npm install babel-plugin-syntax-dynamic-import -D 这是用来编译import异步引用方法的模块 然后在.babelrc中引入这个插件 { “plugin”: [‘syntax-dynamic-...
vue2路由懒加载 小坑
weixin_50760181的博客
09-03 124
因为一个{} 的故事，我找啦好久 错误代码如下： { path: '/setPlan', name:'setPlan', component: () => { // {} 这样路由会识别不出来，访问路由加载不出来，会空白页 import('../views/pages/setPlan/index') } } 我一直想 我错在哪里啦 突然我把中括号去掉啦 页面就加载出来啦 改完如下 { path: '/setPlan',
vue 路由懒加载的三种方式，以及遇到线上版本因为路由懒加载会偶发出现Loading chunk xx failed 的解决办法
扬帆前行
06-09 3046
vue 路由懒加载的三种方式（本人常用ES6的import按需加载） const login = resolve => require(['@/pages/auth/login/login'], resolve)//vue异步组件按需加载方式 const login = () => import(/* webpackChunkName: "login" */ '@/pages/auth/login/login')//ES6按需加载 本人常用方式 const login = r=>re
解决vue 引入子组件报错的问题
10-18
今天小编就为大家分享一篇解决vue 引入子组件报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2笔记 — vue-router路由懒加载的实现
12-09
用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题，当我们用到某个路由后，才去加载对应的组件，这样就会更加高效，实现代码如下： import Vue ...
vue-router路由懒加载的实现（解决vue项目首次加载慢）
10-18
主要介绍了vue-router路由懒加载的实现（解决vue项目首次加载慢），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue路由跳转时报错
weixin_45102492的博客
01-25 380
vue的同级子路由把路径把路径写成多级时（例如：/foo/zz），第一次点击其中一个子路由，可以正常跳转，接着点击其他的路由报错如下。 解决：在vue.config.js中添加下面的配置，重启服务就可以了 module.exports = { publicPath: '/', } ...
vue 路由嵌套（子路由跳转报错或者失效解决方法）
weixin_45000761的博客
11-24 9733
嵌套路由时，子路由懒加载有时会失效，最好定义引用好，再进行加载，示例结构： { path: '/shopRech', redirect:'/shopRech/shopRechHome', component:{ template:'<div> <router-view></router-view></div>' }, meta: { title: '积分充值'}, children:[ {
vue同页面多路由懒加载-及可能存在问题的解决方式
菜鸡奋斗ing的博客
04-04 2065
先上图，再解释 图一是多路由页面，图二是路由文件。从图一可以看出每个router-view对应的name都不一样。从图二可以看出层路由对应的组件加载方式要跟图一中的name相对应，并且图二的路由层在跟图一对应的页面中要加上components层，多一个s结尾，里面的的方法名就是图一路由的name值，里面还可以照样用懒加载的方式。 页面上其他的路由在路由文件中也跟图二是一样的写法。 附送可能存在的问...
使用dojo框架出现错误"SyntaxError: Unexpected token <"中的一种解决方法
qq_16268679的博客
09-09 1776
接触一年编程的菜鸟一枚，用词什么的望包涵。 由于项目前台使用dojo框架，而dojo的教程说明也比较少，遇到一些非共性的问题bug，很不好找。这里就把遇到的一个问题， 它的一个可能的解决方法记下来吧。 着手的项目是进销存类的，自己测的时候，没有遇到过这类问题，后来导入一些测试的正式数据，打开其中的一些单据的时候,会报 "SyntaxError: Unexpected token<
vue懒加载及vuex基础
qq_50220069的博客
11-23 331
路由懒加载 好处：提升首屏打开速度 原理：只有切换到对于路由的时候，路由组件的js才引入 { path:"/news", component: () => import('@/views/xxxx') } vuex vuex 是 专门为vue程序设计的（vue的插件），一个集中式的 应用状态管理 工具，可以让状态 的变化 是可预测的 npm i vuex -S src新建store目录 store index.js import Vue from 'vue'
在vue3.x中遇到的报错：Uncaught (in promise) Error: Couldn‘t resolve component “****“ at “/*****“
热门推荐
weixin_45773503的博客
02-08 1万+
Uncaught (in promise) Error: Couldn’t resolve component “default” at “/about” at eval (vue-router.esm-bundler.js?6c02:1990) 异步异常（字面理解） 配置根目录下的vue.comfig.js 原先我是写成这样（错***） 查看里面的publicPath: "/", 对，不能有. module.exports = { publicPath: "/", } ...
新版 Vue-devtool 离线安装
weixin_45773503的博客
02-26 2218
github下载地址： https://github.com/vuejs/vue-devtools/ 记得用tags里面的 解压 然后用管理员方式打开cmd后进入解压文件后、 执行npm install 然后执行npm run build（原来）之后会报错，因为要用 yarn 来安装 所以安装yarn npm -g bin找到npm的bin目录 到bin目录下，使用管理者模式打开cmd,运行npm i -g yarn 使用yarn 在下载的文件夹内跑yarn install 然.
better-scroll的observe-dom参数
weixin_45773503的博客
08-12 1119
还在为better-scroll发愁吗，明明所有的配置都是正确的它就是不能滚动。 当然也有可能是真的配置错了 言归正传，我们来看看这个observe-dom参数 1. 官方解释 开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性： 针对改变频繁的 CSS 属性，增加 debounce 如果改变发生在 scroll 动画过程中，则不会触发 r
axios（codewhy老师学习笔记）
weixin_45773503的博客
03-21 894
为什么选择axiox 作者推荐，量级轻。 功能特点 在浏览器中发送XMLHttpRequests请求 在node.js中发送http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 …
postcss-px-to-viewport 的使用
weixin_45773503的博客
08-04 751
安装 npm install postcss-px-to-viewport --save-dev 配置vue.config.js文件 module.exports = { css: { loaderOptions: { postcss: { plugins: [ require(‘postcss-px-to-viewport‘)({ uni
vue-qr插件报错TypeError: Cannot read properties of undefined (reading '_c')
最新发布
08-18
在解决这个问题之前，还需要注意引用中提到的情况，即在本地代码运行正常但在线上报错的可能性，可能涉及到vue-json-viewer插件的加载和使用。因此，需要确保插件的正确引入和配置。总之，问题的解决方法包括检查...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值