Vue.js 如何通过vuejs pwa中的web共享目标API修复URL查询参数不工作的问题？

我正在VueJS中构建一个新的PWA，并已在我的manifest.json（）中将该应用程序注册为共享目标。现在，如果我通过浏览器地址栏（例如“/#/page edit？URL=”）将查询参数直接放在URL中，我的代码就可以工作，但是如果我通过Web共享目标API发送它，代码就不能工作

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

当前舱单： 当前Vue视图： 我已经删除了大部分不重要的代码。如您所见，我目前以两种方式加载查询数据：
1.作为数据默认值，例如，

“url”：this.$route.query.url | | null

2.作为

中的变量，例如

{{{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>

---

从share_target中的操作中删除#来修复它，我做了以下几件事：

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

从清单中的

share_target.action

中删除了#

---

不知怎的把它都修好了

为了解决这个问题，我做了以下几件事：

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

从清单中的

share_target.action

中删除了#

不知怎的把它都修好了

<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>

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

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