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

最新推荐文章于 2024-06-28 16:15:37 发布
最新推荐文章于 2024-06-28 16:15:37 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
原文链接：https://devpress.csdn.net/viewdesign/642e3cf2986c660f3cf934c0.html
版权
文章讨论了Vue中三种不同的组件导入方式：常规导入、Vue异步组件技术和动态import()语法。常规导入可能导致大型JS文件，影响加载速度。而Vue异步组件和动态导入能实现按需加载，优化应用性能，特别是对于多页面应用，推荐使用动态import()语法。
摘要由CSDN通过智能技术生成

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')

 在这里插入图片描述

 

OneBaBa
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue的router组件component在import时不能使用变量问题
10-15
在Vue.js应用中，Vue Router是一个强大的路由管理库，它允许我们定义动态路由并按需加载组件，以优化应用程序的性能。然而，在某些情况下，我们可能想要根据条件或变量来动态导入组件。本文将深入探讨如何解决Vue ...
vue路由中component的动态引入（import、require的各种写法）
start_sea的博客
03-24 6165
常用写发，先用import通过路径引入组件对象，再赋给component。直接“@”到目标主文件夹，不用敲那么多点点点。
Vue router 路由中path和component的作用
weixin_45608986的博客
08-10 1万+
component是获取跳转页面的地址 方式一： 和引入组件一样 先把要跳转的页面引入router js文件中再进行调用 方式二： 直接在component获取要跳转页面的位置 component:()=>import(' 跳转页面地址') path是路由参数，当路径匹配到当前路由参数时，就会跳转component所对应的页面组件 ...
vue-router的学习
最新发布
weixin_55797790的博客
06-28 750
【代码】vue-router的学习。
【Vue】路由中引入组件Component的三种方式
michiko98的博客
06-14 6416
vue 路由
vue路由使用以及组件扩展
weixin_49491274的博客
06-02 617
<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实现路由懒加载及组件懒加载的方式
10-16
在Vue路由配置中，我们可以在指定路由的component属性中使用import()函数。 对于组件的懒加载，其实现方式与路由懒加载类似。我们可以用const声明一个异步加载组件的函数，当这个组件需要渲染时，import()函数会...
详解vue组件中使用路由方法
10-17
在Vue组件中使用路由是开发Vue应用中非常常见且重要的一个环节。接下来我们将详细解析如何在Vue组件中使用路由的步骤。 1. 实现下载路由模块的步骤 首先，你需要安装Vue Router。可以通过npm或者yarn来安装。使用...
Vue中的组件及路由使用实例代码详解
10-16
要在Vue应用中实现路由跳转，我们需要引入Vue Router这个官方的路由管理库。路由允许我们将URL映射到不同的组件，提供页面间的导航。以下代码展示了基本的Vue Router配置： ```html var router = new Vue...
vue 解决路由只变化参数页面组件不更新问题
10-16
`$route`是Vue Router注入到每个组件实例中的一个对象，包含了当前路由的所有信息，包括路径、参数和查询。通过在组件中设置`watch`，我们可以监听`$route`的变化，并在发生变化时执行相应的处理函数。 以下是一个...
vue中组件引入
热门推荐
flyf123的博客
02-24 1万+
vue的一个强大功能就是组件化开发，那么组件如何引入到页面中呢，今天就带大家一起了解一下 第一种方式：在页面单独引入 在script标签内部导入组件 import login from './components/Login' 在components中注册组件 components:{ login }, 最后就可以在页面中使用了 <login></login> 第二种方式：在全局注册组件 在components文件夹下新建一个index.js文件 在
vue-router 基本使用
顺其自然~专栏
03-31 1057
路由，其实就是指向的意思（路者，道也。路就是往来通行的地方。由，则是经过，比如必由之路，就是必须要经过的道路或地方。），当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射。所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 　　点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么..
深圳Web培训：详解Vue-Router路由与配置
莫安迪
07-10 312
深圳Web培训：详解Vue-Router路由与配置 现在的很多应用都流行SPA应用（singe page application) 。 传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个时候因受到网络、性能的影响，浏览器会出现不定时间的空白界面，用户体验不好。而单页应用则是用户通过某些操作更改地址栏url之后，动态的进行不同模板内容的无刷新切换，用户体验好...
vue-router引入组件的几种方式及打包区别
qq407949480的博客
03-16 3760
本文使用@vue/cli 5.0.1创建的vue2工程做的验证，预置数据package.json详见最后，其中后三种方式vue路由懒加载的方式。 之前有个操作window全局函数的时候，使用直接引入的方式，结果并没有执行，原因是这种方式会把所有引入的组件打包成一个js,而这个组件又异步引入了很多其它组件及服务，导致window函数的顺序调整导致了没有执行，改成异步加载的方式之后，window函数又能正确的执行啦。 方式一：普通直接引用的方式 import DemoIndex from '../vie
vue引入组件的几种方法
03-20 7313
vue引入组件的几种方法
vue路径component使用import的方式来写 component: () =＞ import(‘@/views/order/orderDetail‘)
qq_51066068的博客
09-13 7053
为什么要是使用vue路由懒加载 vue这种单页面应用，如果我们不去做路由懒加载，打包之后的文件将会异常的大，就会造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，不利于用户体验，运用懒加载就可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
vue引入组件的方式（全方式）
qq_53701739的博客
06-26 5144
这篇文章主要总结，vue引入组件，多种方式，局部（页面），全局，异步，动态加载...
vue3路由引入公共组件
03-29
在Vue3中，可以通过使用`defineAsyncComponent`方法来引入异步组件，从而实现按需加载。在路由中引入公共组件可以使用以下步骤： 1. 在`src/components`目录下创建公共组件文件，例如`Header.vue`。 2. 在路由文件中引入`defineAsyncComponent`方法，并使用该方法引入公共组件。 例如，假设我们有一个`Header.vue`组件，它在多个页面中都需要使用。我们可以在路由文件中定义一个异步组件来引入该组件： ```js import { defineAsyncComponent } from 'vue' import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: defineAsyncComponent(() => import('@/views/Home.vue')), // 引入公共组件 meta: { header: defineAsyncComponent(() => import('@/components/Header.vue')) } }, // ... ] }) export default router ``` 上述代码中，我们使用`defineAsyncComponent`方法来引入`Header.vue`组件，并将其作为`meta`的一个属性。在需要使用该组件的页面中，我们可以通过访问`meta.header`来引用该组件。 ```html <template> <div> <header-component /> <!-- ... --> </div> </template> <script> import { computed } from 'vue' import { useRoute } from 'vue-router' export default { components: { HeaderComponent: computed(() => useRoute().meta.header) } } </script> ``` 上述代码中，我们使用`computed`和`useRoute`方法来访问`meta.header`属性，并将其作为`HeaderComponent`的组件引用。 注意：在Vue3中，`createRouter`和`createWebHistory`方法的使用方式发生了改变，请根据实际情况进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值