CN112083966B - 一种加载远程vue组件的方法 - Google Patents

Abstract

本发明公开了一种加载远程vue组件的方法。它具体包括如下步骤：(1)通过vue主框架请求路由模块，路由模块调用远程组件解析模块；(2)远程组件解析模块解析远程组件的http地址，根据http地址规则访问远程组件服务来请求远程组件，若请求失败，返回默认的错误页面到步骤(1)中；若请求成功，创建新的html文档且插入远程组件片段；(3)根据vue单文件组件规范从html文档中提取script、template、style并初始为vue组件；(4)将vue组件动态编译返回到步骤(1)中并拼接到vue主框架中。本发明的有益效果是：使得vue主框架通过路由模块能够加载远程的vue组件，从而解决了vue不能加载远程vue组件的缺陷。

Description

一种加载远程vue组件的方法

技术领域

本发明涉及前端vue远程组件相关技术领域，尤其是指一种加载远程vue组件的方法。

背景技术

目前vue上手简单、灵活易用、便以维护，但是在应用开发中，vue其特性不支持加载远程单文件组件，使我们的平台化开发过程中时不能将子应用的vue组件封装在它自己的服务中，因此为了能够使应用能够封装属于它自己的vue组件，通过http访问加载远程vue组件变的非常迫切。

发明内容

本发明是为了克服现有技术中存在上述的不足，提供了一种解决vue不能加载远程vue组件的加载远程vue组件的方法。

为了实现上述目的，本发明采用以下技术方案：

一种加载远程vue组件的方法，具体包括如下步骤：

(1)通过vue主框架请求路由模块，路由模块调用远程组件解析模块；

(2)远程组件解析模块解析远程组件的http地址，根据http地址规则访问远程组件服务来请求远程组件，若请求失败，返回默认的错误页面到步骤(1)中；若请求成功，创建新的html文档且插入远程组件片段；

(3)根据vue官方约定的单文件组件规范，通过远程组件解析模块中的解析器分别对插入的片段进行script、template、style内容分析；如果分析的内容合法，将进一步对script、template、style的内容通过解析器进行解析；如果分析的内容不合法，则返回错误提示到步骤(1)中；

(4)解析完成后，将会对解析的内容进行vue可识别化转译，通过vue运行时编译的特性将转译后的内容织入到vue主框架中。

通过上述方法的设计使得vue主框架通过路由模块能够加载远程的vue组件，从而解决了vue不能加载远程vue组件的缺陷。

作为优选，所述的vue主框架是利用vue运行时编译特性将远程组件织入到该主框架中，用于渲染显示远程组件；所述的路由模块是根据客户端传入的路由，跳转到指定的远程服务路由路径，将远程服务路由路径传递到远程组件解析模块；所述的远程组件解析模块用于解析远程组件的http地址以及远程组件；所述的远程组件服务指的是根据vue单文件组件规范提供远程组件，其中一个单文件组件包含三个部分，分别是<template>…</template>、<script>…</script>、<style>…</style>，Template中的内容是具体的页面内容，script中的内容是javascript执行脚本，style中的内容是css样式表。

作为优选，在步骤(2)中，若请求失败，返回默认的错误页面到步骤(1)的vue主框架中，并通过vue主框架给路由模块。

作为优选，在步骤(3)中，如果分析的内容不合法，则返回错误提示到步骤(1)的vue主框架中，并通过vue主框架给路由模块。

作为优选，在步骤(4)中，通过vue运行时编译的特性将转译后的内容织入到vue主框架中初始化为vue组件后，将该vue组件设给路由模块，让路由模块通过关系映射数据结构对应到最开始的请求路由，从而使得路由模块真正跳转到该vue组件。

本发明的有益效果是：使得vue主框架通过路由模块能够加载远程的vue组件，从而解决了vue不能加载远程vue组件的缺陷。

附图说明

图1是本发明的方法流程图。

具体实施方式

下面结合附图和具体实施方式对本发明做进一步的描述。

如图1所述的实施例中，一种加载远程vue组件的方法，包括vue主框架、路由模块、远程组件解析模块以及远程组件服务，其中vue主框架是利用vue运行时编译特性将远程组件织入到该主框架中，用于渲染显示远程组件；路由模块是根据客户端传入的路由，跳转到指定的远程服务路由路径，将远程服务路由路径传递到远程组件解析模块；远程组件解析模块用于解析远程组件的http地址以及远程组件；远程组件服务指的是根据vue单文件组件规范提供远程组件，其中一个单文件组件包含三个部分，分别是<template>…</template>、<script>…</script>、<style>…</style>，Template中的内容是具体的页面内容，script中的内容是javascript执行脚本，style中的内容是css样式表，具体包括如下步骤：

(1)通过vue主框架请求路由模块，路由模块调用远程组件解析模块；

(2)远程组件解析模块解析远程组件的http地址，根据http地址规则访问远程组件服务来请求远程组件，若请求失败，返回默认的错误页面到步骤(1)的vue主框架中，并通过vue主框架给路由模块；若请求成功，创建新的html文档且插入远程组件片段；

(3)根据vue官方约定的单文件组件规范，通过远程组件解析模块中的解析器分别对插入的片段进行script、template、style内容分析；如果分析的内容合法，将进一步对script、template、style的内容通过解析器进行解析；如果分析的内容不合法，则返回错误提示到步骤(1)的vue主框架中，并通过vue主框架给路由模块；

(4)解析完成后，将会对解析的内容进行vue可识别化转译，通过vue运行时编译的特性将转译后的内容织入到vue主框架中，并将其初始化为vue组件后，将该vue组件设给路由模块，让路由模块通过关系映射数据结构对应到最开始的请求路由，从而使得路由模块真正跳转到该vue组件。

这样设计使得vue主框架通过路由模块能够加载远程的vue组件，从而解决了vue不能加载远程vue组件的缺陷。

Claims (4)

1.一种加载远程vue组件的方法，其特征是，具体包括如下步骤：

（1）通过vue主框架请求路由模块，路由模块调用远程组件解析模块；

（2）远程组件解析模块解析远程组件的http地址，根据http地址规则访问远程组件服务来请求远程组件，若请求失败，返回默认的错误页面到步骤（1）中；若请求成功，创建新的html文档且插入远程组件片段；

（3）根据vue官方约定的单文件组件规范，通过远程组件解析模块中的解析器分别对插入的片段进行script、template、style内容分析；如果分析的内容合法，将进一步对script、template、style的内容通过解析器进行解析；如果分析的内容不合法，则返回错误提示到步骤（1）中；

（4）解析完成后，将会对解析的内容进行vue可识别化转译，通过vue运行时编译的特性将转译后的内容织入到vue主框架中；通过vue运行时编译的特性将转译后的内容织入到vue主框架中初始化为vue组件后，将该vue组件设给路由模块，让路由模块通过关系映射数据结构对应到最开始的请求路由，从而使得路由模块真正跳转到该vue组件；

其中，所述的vue主框架是利用vue运行时编译特性将远程组件织入到该主框架中，用于渲染显示远程组件；所述的路由模块是根据客户端传入的路由，跳转到指定的远程服务路由路径，将远程服务路由路径传递到远程组件解析模块；所述的远程组件解析模块用于解析远程组件的http地址以及远程组件；所述的远程组件服务指的是根据vue单文件组件规范提供远程组件，其中一个单文件组件包含三个部分，分别是<template>…</template>、<script>…</script>、<style>…</style>，Template中的内容是具体的页面内容，script中的内容是javascript执行脚本，style中的内容是css样式表。

2.根据权利要求1所述的一种加载远程vue组件的方法，其特征是，在步骤（2）中，若请求失败，返回默认的错误页面到步骤（1）的vue主框架中，并通过vue主框架给路由模块。

3.根据权利要求1所述的一种加载远程vue组件的方法，其特征是，在步骤（3）中，如果分析的内容不合法，则返回错误提示到步骤（1）的vue主框架中，并通过vue主框架给路由模块。

4.根据权利要求1 所述的一种加载远程vue组件的方法，其特征是，在步骤（4）中，通过vue运行时编译的特性将转译后的内容织入到vue主框架中初始化为vue组件后，将该vue组件设给路由模块，让路由模块通过关系映射数据结构对应到最开始的请求路由，从而使得路由模块真正跳转到该vue组件。