Top
Fork me on Gitee My Github

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 来响应这个变化 。

posted @   lisashare  阅读(4281)  评论(0编辑  收藏  举报
编辑推荐:
· 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编程运行原理
点击右上角即可分享
微信分享提示