如何通过vuejs pwa中的web共享目标API修复URL查询参数？

Question

我正在VueJS中构建一个新的PWA，并在我的manifest.json (https://developers.google.com/web/updates/2018/12/web-share-target)中将该应用程序注册为共享目标。现在，如果我通过浏览器地址栏(例如“/#/page-编辑? URL =https://google.com/&title=Google&description=SearchEngine”)将查询参数直接放在url中，那么我的代码就能工作，但是如果我通过发送它，它就不能工作。

我已经尝试了一系列不同的清单设置，但是我不确定我的清单设置是错误的还是我的代码(例如，尝试了"GET“和"POST”这两种方法，等等)。

当前清单：

{
  "name": "...",
  "short_name": "...",
  "icons": [],
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "...",
  "theme_color": "...",
  "share_target": {
    "action": "/#/page-edit",
    "method": "GET",
    "enctype": "application/x-www-form-urlencoded",
    "params": {
      "title": "title",
      "text": "description",
      "url": "url"
    }
  }  
}

当前Vue视图：

我已经删除了大部分不重要的代码。正如您所看到的，我目前以两种方式加载查询数据：

1. 作为数据默认值，例如，'url': this.$route.query.url || null
2. 作为<p>中的变量，例如{{ this.$route.query.url }}

<template>
  <form class="modal-view">
    <div class="field">
      <label for="url" class="label">URL / link</label>
      <div class="control">
        <input id="url" v-model="url" class="input" type="url" placeholder="https://..." >
      </div>
      <p><strong>url query:</strong> {{ this.$route.query.url }}</p>
    </div>

    <div class="field">
      <label for="title" class="label">Title</label>
      <div class="control">
        <input id="title" v-model="title" class="input" type="text" placeholder="The greatest article" >
      </div>
      <p><strong>title query:</strong> {{ this.$route.query.title }}</p>
    </div>

    <div class="field">
      <label for="description" class="label">Description</label>
      <div class="control">
        <input id="description" v-model="description" class="input" type="text" placeholder="The greatest article" >
      </div>
      <p><strong>description query:</strong> {{ this.$route.query.description }}</p>
    </div>

    <hr class="is-small has-no-line">

    <div class="field is-grouped is-grouped-right">
      <div class="control">
        <button @click.prevent="createPage" class="button is-primary is-fullwidth is-family-secondary">Submit</button>
      </div>
    </div>
  </form>
</template>

<script>
  import ...
  export default {
    name: 'page-edit',
    computed: {},
    data () {
      return {
        // Initialize default form values
        'url': this.$route.query.url || null,
        'title': this.$route.query.title || null,
        'description': this.$route.query.description || null
      }
    },
    mounted () {},
    methods: {
      createPage () {},
    }
  }
</script>

因此，我所期望的是，如果通过共享查询参数，也可以读取查询参数，但此时，它不会以这种方式显示任何内容。但是，再一次提到，如果我只是更改浏览器地址栏中的查询参数(这也是我感到困惑的原因)，这一切都是有效的。

最终结果应该是

编辑

编辑1一直在玩更多的游戏，现在发现如果我使用window.location.href，它将显示以下内容：https://appurl.com/?title=xxx&description=xxx#/page-edit

也就是说，它将查询参数放置在错误的位置？

编辑2可能与Vue路由器问题有关：如果页面加载上存在当前查询参数，则哈希模式将#放置在URL中的不正确位置

编辑3以某种方式修正了它(我想)

const router = new Router({
  mode: 'history'

并从share_target中的操作中删除#

Answer 1

为了解决这个问题，我做了以下工作：

1. 在路由器中添加了以下内容，从而将#从所有URL中删除

const router = new Router({
  mode: 'history'

1. 从清单中的share_target.action中删除#

一切都解决了！