Question

假设我有一个Vue应用http://www.example.com/?url=https://example-data.com/activity-sets/example/sample.jsonld。

我希望vue应用程序通过url中给定路径传递的jsonld加载页面，即https://example-data.com/activity-sets/example/sample.jsonld

这个想法是：任何人都应该能够将URL修改为位于世界任何地方的不同jsonld数据。我该如何实现？

我是Vue的新手，对要做什么一无所知。

Answer 1

类似这样的事情相当容易。只需在Web服务器的根目录中创建一个HTML文档（index.html），然后添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue Example</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    var $_GET=[];
    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(a,name,value){$_GET[name]=value;});
    new Vue({
      el: '#app',
      data () {
        return {
          url: $_GET['url']
        }
      },
      template: '<iframe :src="url"></iframe>'
    })
    </script>
</body>
</html>

它将从网址中读取?url=的内容，并将其作为iFrame src插入。

在理论中，这可以解决问题。如果您用例如测试。？url = https://twitter.com/chucknorris，您最终将遇到“内容安全策略”违规。大多数网站都将通过这种方式得到保护，因此您应该根据自己的目的进行测试。

使用作为参数传递给url的jsonld数据加载vue应用

1 个答案: