Vue路由中引入组件Component的三种方式

最新推荐文章于 2024-03-13 23:12:49 发布
转载 最新推荐文章于 2024-03-13 23:12:49 发布 · 2.5k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://devpress.csdn.net/viewdesign/642e3cf2986c660f3cf934c0.html
标签
#vue.js #前端 #javascript
文章讨论了Vue中三种不同的组件导入方式：常规导入、Vue异步组件技术和动态import()语法。常规导入可能导致大型JS文件，影响加载速度。而Vue异步组件和动态导入能实现按需加载，优化应用性能，特别是对于多页面应用，推荐使用动态import()语法。

1.普通引入方式

import 组件名 from ‘组件路径’

如

import login from ‘@/components/login’

优点: 易理解，
缺点:webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢

2.Vue异步组件技术

 component: (resolve) => require(['@/views/login/login'], resolve)

在这里插入图片描述

3.使用动态的import( )语法(推荐使用)

 component: () => import('@/views/login/login')

 在这里插入图片描述

 

vue路由中component的动态引入（import、require的各种写法）
start_sea的博客
03-24 7263
常用写发，先用import通过路径引入组件对象，再赋给component。直接“@”到目标主文件夹，不用敲那么多点点点。
Vue Router 实现动态路由和常见问题解决方案
良_123的专栏
03-08 6071
ue Router 实现动态路由和常见问题解决方案
Vue实战之Vue中组件(component)
9.冄2.7.號的博客
08-01 1万+
es6基本语法及使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之系列课程</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> <!-- ES6: EcmaScri
Vue router 路由中path和component的作用
weixin_45608986的博客
08-10 1万+
component是获取跳转页面的地址 方式一： 和引入组件一样 先把要跳转的页面引入router js文件中再进行调用 方式二： 直接在component获取要跳转页面的位置 component:()=>import(' 跳转页面地址') path是路由参数，当路径匹配到当前路由参数时，就会跳转component所对应的页面组件 ...
【Vue】路由中引入组件Component的三种方式
michiko98的博客
06-14 6656
vue 路由
(0019) H5-Vue路由中引入组件Component的三种方式
沐雨07的专栏
07-03 516
原文链接：https://blog.csdn.net/weixin_46266624/article/details/130510191。
vue路由使用以及组件扩展
weixin_49491274的博客
06-02 818
<a href="#">登录</a> | <a href="#">注册</a>
关于Vue实现动态路由component找不到组件的问题(Error: Cannot find module ‘@/views/User‘)
提笔忘字的帝国
03-22 1万+
Error: Cannot find module '@/views/User';store sync?5d98:2 Uncaught (in promise) Error: Cannot find module '@/views/User'
vue中组件引入
热门推荐
flyf123的博客
02-24 1万+
vue的一个强大功能就是组件化开发，那么组件如何引入到页面中呢，今天就带大家一起了解一下 第一种方式：在页面单独引入 在script标签内部导入组件 import login from './components/Login' 在components中注册组件 components:{ login }, 最后就可以在页面中使用了 <login></login> 第二种方式：在全局注册组件 在components文件夹下新建一个index.js文件 在
vue-router 基本使用
顺其自然~专栏
03-31 1515
路由，其实就是指向的意思（路者，道也。路就是往来通行的地方。由，则是经过，比如必由之路，就是必须要经过的道路或地方。），当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射。所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 　　点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么..
Vue路由详解
警警的博客
03-13 3018
beforeRouteEnter因为触发的时候vue实例还没有创建，所以这个钩子函数中不能使用this，而beforeRouteUpdate和beforeRouteLeave都是可以访问到实例的，因为当这两个函数触发的时候实例都已经被创建了；Vue Router 提供了导航守卫（Navigation Guards），允许你在路由发生变化时执行一些逻辑，比如在进入页面之前进行身份验证，或在离开页面时进行确认操作。在Vue.js中，你可以使用路由的懒加载功能来提前预加载其他页面的业务。方法来实现页面的跳转。
vue引入组件的几种方法
03-20 7959
vue引入组件的几种方法
深圳Web培训：详解Vue-Router路由与配置
莫安迪
07-10 420
深圳Web培训：详解Vue-Router路由与配置 现在的很多应用都流行SPA应用（singe page application) 。 传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候因受到网络、性能的影响，浏览器会出现不定时间的空白界面，用户体验不好。而单页应用则是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好...
vue-router引入组件的几种方式及打包区别
qq407949480的博客
03-16 4048
本文使用@vue/cli 5.0.1创建的vue2工程做的验证，预置数据package.json详见最后，其中后三种方式vue路由懒加载的方式。 之前有个操作window全局函数的时候，使用直接引入的方式，结果并没有执行，原因是这种方式会把所有引入的组件打包成一个js,而这个组件又异步引入了很多其它组件及服务，导致window函数的顺序调整导致了没有执行，改成异步加载的方式之后，window函数又能正确的执行啦。 方式一：普通直接引用的方式 import DemoIndex from '../vie
vue引入组件的方式（全方式）
qq_53701739的博客
06-26 5477
这篇文章主要总结，vue引入组件，多种方式，局部（页面），全局，异步，动态加载...
vue路径component使用import的方式来写 component: () =＞ import(‘@/views/order/orderDetail‘)
qq_51066068的博客
09-13 8007
为什么要是使用vue路由懒加载 vue这种单页面应用，如果我们不去做路由懒加载，打包之后的文件将会异常的大，就会造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，不利于用户体验，运用懒加载就可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
路由中的redirectTo与component
web
10-27 1912
{ path: ‘’, pathMatch: ‘full’, component: InfoComponent}, { path: ‘’, pathMatch: ‘full’, redirectTo: ‘workbench’} 我这里是讲区别，不是完整配置 一般我们配置路由的时候，会选择这下面的其中一个 const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'login'}, {path: 'login', com.
VUE之vue router
wchg21131的博客
06-18 1820
路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为：后端路由[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i3BoE4eu-1687068778679)(images/后端路由.png)]SPA（Single Page Application）前端路由[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sl9ISEKA-1687068778680)(images/前端路由.png)]基于URL中的hash实现（点击菜单的时候
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值