自定义链接

功能介绍

自定义链接功能支持用户在 DIY 页面装修中为按钮、图片、文字等组件配置点击跳转行为，支持内部页面、外部 URL 和特殊场景的跳转类型，精准且符合业务场景需求 自定义链接会在页面路径功能中显示

框架开发的自定义链接

系统框架定义了一些自定义链接，同时还会加载插件的自定义链接

如需了解自定义链接的核心原理，开发者可以自行阅读

文件位置：niucloud-core/src/main/resources/core/loader/diy/links.json

插件开发自定义链接

文件位置：niucloud-addon/shop/src/main/resources/shop/loader/diy/links.json 关键代码：

{
	"SHOP_BASE_LINK": {     // 自定义链接分组关键字key
		"title": "商城系统",    // 自定义链接分组名称
		"type": "folder",   // 类型，folder 表示文件夹，link 表示链接
		"addon_info": {
			"title": "商城",
			"key": "shop"
		},
		"child_list": [
			{
				"name": "SHOP_LINK",    // 二级自定义链接分组关键字key
				"title": "商城链接",    // 分组名称
				"child_list": [
					{
						"name": "SHOP_INDEX", // 链接关键字key
						"title": "商城首页",    // 链接名称
						"url": "/addon/shop/pages/index",   // uni-app 手机端路由地址
						"is_share": 1,  // 是否支持分享  1：支持，0：不支持
						"action": "decorate"    // 是否支持装修，空为不支持，decorate：表示支持装修
					},
					{
						"name": "SHOP_GOODS_CATEGORY",
						"title": "商品分类",
						"url": "/addon/shop/pages/goods/category",
						"is_share": 1,
						"action": ""
					}

				]
			}

		]
	}
}

开发完成后，添加一个标题组件，点击链接地址，打开链接选择弹框即可看到

diy-link 框架封装的自定义链接组件

开发者在开发自定义组件的右侧编辑属性组件时，可能需要设置自定义链接的业务场景。此时可以引入系统框架封装的 diy-link 自定义链接选择弹框组件

效果图 如需了解自定义链接的核心原理，开发者可以自行阅读

文件位置：admin/src/components/diy-link/index.vue

前端调用自定义链接组件的关键代码

diyStore.editComponent 为当前选中装修组件的数据结构

<el-form-item :label="t('link')">
    <diy-link v-model="diyStore.editComponent.link" />
</el-form-item>

效果图

uni-app 调用自定义链接跳转

框架定义了 diyRedirect 自定义跳转链接方法 diyStore 定义了 toRedirect 自定义链接跳转方法，开发者可以调用 自定义组件中调用自定义链接跳转，代码参考