vue路径component使用import的方式来写 component: () =＞ import(‘@/views/order/orderDetail‘),

最新推荐文章于 2024-04-26 11:31:32 发布
最新推荐文章于 2024-04-26 11:31:32 发布
阅读量1.3w 收藏 44
点赞数 25
文章标签： vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxh0816/article/details/120839739
版权

以前老师教的一直是这种写法:

在这里插入图片描述
工作后突然看到这种写法,我蒙了
在这里插入图片描述
首先我们先来理解一下,路由文件里面.
path里面其实就是url也就是我们写路径的,我们在网址栏所看到的.
而component则是我们所对应的页面组件.每个页面相当于一个组件.所以我们的页面的名字就是组件的名字.
****方法一:普通引入方式
所以其实老师教的则是最简单的一种引入组件的方式:
在这里插入图片描述
我们在component中定义完组件名字,还需要去通过import去引入组件.
这种方法不推荐,因为
优点: 易理解，
缺点:webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢
****方法二:使用动态的import( )语法(推荐使用)
在这里插入图片描述

在这里插入图片描述

而@的写法呢是因为我们vue在webpack.base.conf.js文件中有如下配置
在这里插入图片描述

爱前端的小周同学
关注
  • 25
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
jiaminghi/data-view dataV for vite vue2 补丁 for npm/yarn
04-13
官网直接安装的不支持vite2/3+vue2的 主要修复： 1.build或者dev项目时不报错，兼容vite2/vite3，vue2； 2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。 yarn npm cnpm ...
vue component 中引入less文件报错 Module build failed
12-10
//在vue component组件中引入less文件 <style lang="less"> @import '@/assets/css/public/layout.less'; </style> 然后就报错了: Module build failed: @import '@/assets/css/public/layout.less'; ...
Vue 动态组件 component: ()=>import() 的理解
热门推荐
回纹勾边宝相花团
03-27 5万+
Vue 官方文档：动态组件 & 异步组件 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数： new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } }) 问题出处 参考：洞香春：Vue + Vue-router + Elem...
vue-router 按需加载 component: () => import() 报错的解决
10-14
主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 vite 动态路由 （）=＞import() 不能使用变量 有时候会有问题
最新发布
callBack_____的博客
04-26 392
vue3 vite 动态路由 （）=>import() 不能使用变量 有时候会有问题
vue路径component使用import的方式来写 component: () =＞ import(‘@/views/order/orderDetail‘)
qq_51066068的博客
09-13 6604
为什么要是使用vue路由懒加载 vue这种单页面应用，如果我们不去做路由懒加载，打包之后的文件将会异常的大，就会造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，不利于用户体验，运用懒加载就可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
vue-router 按需加载 component: () = import() 报错的解决
01-18
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’); 可是，很多情
vue 使用路由component: () =＞import (‘ ‘)报错解决办法
sinat_41694829的博客
08-11 2823
vue运行时报错
由vue-router中component: ()=>import()引发的ES6箭头函数的语法问题
Dysons的专栏
04-08 4058
Vue-router动态加载组件的语法方式为: component: ()=>import()返回对应的组件,最近在项目中不下心写成了component: ()=>{import()},由此引发了ES6中箭头函数语法的问题： 1. ()=>: 没有{}的时候，箭头函数指向的就是这个函数的返回值(对应的组件,这个路由就会显示内容啦)； 2.()=>{}: 有{}的时候，...
解决vue的router组件component在import时不能使用变量问题
10-15
主要介绍了解决vue的router组件component在import时不能使用变量问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的...
vue-router 按需加载 component: () =＞ import()报错
weixin_43728978的博客
07-20 713
命令输入 cnpm install babel-plugin-syntax-dynamic-import --save-dev webpack.base.conf.js修改loader { test: /\.js$/, loader: 'babel-loader', options: { plugins: ['syntax-dynamic-import'] }, include: [resolve('src
vue高复用组件自动import
yeqiurong的专栏
04-13 461
高复用组件自动import
component: resolve => require(['@/view/index.vue'], resolve) 与component: index区别
余_小凡 的博客
08-16 1万+
require: 运行时调用，理论上可以运用在代码的任何地方， import：编译时调用，必须放在文件开头 懒加载：component: resolve => require(['@/view/index.vue'], resolve) 用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js 非懒...
angular 指定components的路径_vue之 动态定义图片路径
weixin_39997173的博客
11-25 209
阅读本文约需要5分钟大家好，我是你们的导师，经常看我朋友圈的同学应该知道，我每天会在微信上给大家免费提供以下服务！1、长期为你提供最优质的学习资源！2、给你解决技术问题！3、每天在朋友圈里分享优质的技术文章！4、每周1、3、5送纸质书籍免费送给大家，每年至少送书800本书！5、为大家推荐靠谱的就业单位！请注意！我上面说的5点全部都是免费的！全网你应该找不到第二家吧！当然，大家在我私人微信...
vue中代码 () => import @代表src
josiecici的博客
04-17 1163
// vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载 const App = () => import('../component/Login.vue');
Webpack-Vue 分片优化——为什么使用懒加载() =＞ import() 里面的组件没有分片打包
japlus的博客
10-09 2905
环境 vue2,webpack3 公司的vue项目需要做一下前端优化，主要问题是网页首屏加载缓慢。 作为单页应用的vue，往往是第一次加载时间会稍长，后续由于利用浏览器缓存，再次打开就快了。且单页应用将页面都打包到一个js（一般是app.js）文件中，在路由跳转的时候不会有闪屏，通过js动态渲染页面元素，无需发起额外的请求获取页面。 但是，为什么还要优化呢—— vue 遇见了iframe 此次我收到的项目是作为其他项目的内嵌形式来加载的，没错，就是iframe。这个项目通过js来控制iframe，
使用require.context根据views文件夹下（多级文件夹）所有.vue文件路径实现路由自动匹配生成如下格式routes，routes: [{ path: '/', redirect: '/login' }, { path: '/home', name: 'home', component: () => import('@/views/Home.vue'), redirect: '/main', children: [{ path: '/main', name: 'main', component: () => import('@/views/Main/index.vue'), children: [{ path: '/xxx', name: 'xxx', component: () => import('@/views/Main/Xxx.vue'), }, { path: '/yyy', name: 'yyy', component: () => import('@/views/Main/Yyy.vue'), } ] }, { path: '/zz', name: 'zz', component: () => import('@/views/Zz/index.vue'), children: [{ path: '/mmm', name: 'mmm', component: () => import('@/views/Zz/Mmm.vue'), }] }, ] }, { path: '/login', name: 'login', component: () => import('@/views/Login.vue') } ]
06-09
你可以使用以下代码实现： ```js const files = require.context('@/views', true, /\.vue$/) const routes = [] files.keys().forEach(key => { const name = key.match(/\/(\w+)\.vue$/)[1] const path = key.replace(/^\.\//, '').replace(/\.vue$/, '').replace(/\/index$/, '') const route = { path: `/${path name: name, component: files(key).default } if (path === 'Home') { route.redirect = '/main' route.children = [{ path: 'main', name: 'main', component: () => import('@/views/Main/index.vue'), children: [{ path: 'xxx', name: 'xxx', component: () => import('@/views/Main/Xxx.vue') }, { path: 'yyy', name: 'yyy', component: () => import('@/views/Main/Yyy.vue') }] }, { path: 'zz', name: 'zz', component: () => import('@/views/Zz/index.vue'), children: [{ path: 'mmm', name: 'mmm', component: () => import('@/views/Zz/Mmm.vue') }] }] } routes.push(route) }) routes.push({ path: '/', redirect: '/login' }, { path: '/login', name: 'login', component: () => import('@/views/Login.vue') }) export default routes ``` 这里使用了 `require.context` 获取所有 `.vue` 文件，然后通过正则表达式获取文件名和路径，最后根据路径和组件生成路由对象，如果是 `Home` 组件，则添加子路由。最后还要添加默认路由和登录路由。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值