如何解决 URL 查询参数无法通过 vuejs pwa 中的网络共享目标 API 工作？

Question

我正在 VueJS 中构建一个新的 PWA，并已将该应用程序注册为我的 manifest.json (https://developers.google.com/web/updates/2018/12/web-share-target). Now my code works if I put the query params directly in the URL via the browser address bar (e.g. "/#/page-edit?url=https://google.com/&title=Google&description=SearchEngine") 中的共享目标，但如果我通过Web 共享目标 API.

我已经尝试了一系列不同的清单设置，但我不确定我的清单设置是否错误或我的代码（例如，尝试了方法 "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>

所以我期望的是，如果通过 Web 共享目标 API 共享，也可以读取查询参数，但此时，它不会以这种方式显示任何内容。但再次提一下，如果我简单地更改浏览器地址栏中的查询参数，它就可以正常工作（这也是我感到困惑的原因）。

End result should look like

编辑

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

即它将查询参数放在错误的位置？

编辑 2 可能与此 Vue 路由器问题有关：Hash mode places # at incorrect location in URL if current query parameters exist on page load

编辑 3 以某种方式修复它（我认为）

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

并从 share_target

中的操作中删除 #

Answer 1

为了修复它，我做了以下事情：

在路由器中添加了以下内容，导致从所有 URL 中删除 #

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

从清单share_target.action中删除了#

以某种方式修复了所有问题！

如何解决 URL 查询参数无法通过 vuejs pwa 中的网络共享目标 API 工作？

How to fix that URL query params are not working via the web share target API in vuejs pwa?

share

vue.js

progressive-web-apps

当前清单：

当前 Vue 视图：

编辑