Vue -- 动态加载组件的四种方式
动态加载组件的四种方式:
1、使用import导入组件,可以获取到组件
var name = 'system';
import myComponent from '@/pages/components/' + name;
var route={
name: name,
component: myComponent
}
2、使用import导入组件,直接将组件赋值给componet
var name = 'system';
var route={
name: name,
component: () => import('../components/' + name + '.vue'); // 或者先赋值给变量 var myComponent =() => import('../components/' + name + '.vue');
}
3、使用require 导入组件,可以获取到组件
var name = 'system';
var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
var route={
name: name,
component: myComponent
}
4、使用require 导入组件,直接将组件赋值给componet
var name = 'system';
var route={
name: name,
component(resolve) {
require(['../components/' + name + '.vue'], resolve)
}
}
作者:Gersy
链接:https://www.jianshu.com/p/20591ad64d2e
来源:简书
vue路由跳转push,replace,go
this.$router.replace({ path: "/subpagest" });//不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录;
this.$router.push({ path: "/subpagest" });//会向 history 栈添加一个新的记录;
this.$router.go(-1);//这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步。
提示:如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),可以使用 beforeRouteUpdate 来响应这个变化 。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理