Я создаю новый PWA в VueJS и зарегистрировал приложение в качестве целевого ресурса в моем manifest.json (https://developers.google.com/web/updates/2018/12/web-share-target). Теперь мой код работает, если я помещаю параметры запроса непосредственно в URL-адрес через адресную строку браузера (например, «/#/страница-редактировать?url=https://google.com/amp;title=Googleamp;description=SearchEngine «), но это не сработает, если я отправил его через целевой 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>
  

Итак, я ожидаю, что параметры запроса также могут быть прочитаны, если они доступны через целевой API веб-ресурса, но на данный момент он ничего не показывает таким образом. Но хорошо бы еще раз упомянуть, что все работает, если я просто изменяю параметры запроса в адресной строке браузера (вот почему я в замешательстве).

Конечный результат должен выглядеть так

Правки

Редактировать 1 Я еще немного поиграл, и теперь обнаружил, что если я использую window.location.href это, это показывает следующее: https://appurl.com/?title=xxxamp;description=xxx#/page-edit

Т. е. это помещает параметры запроса в неправильное положение?

Правка 2 может быть связана с этой проблемой маршрутизатора Vue: режим хэширования помещает # в неправильное местоположение в URL, если текущие параметры запроса существуют при загрузке страницы

Правка 3 Каким-то образом исправила это с помощью (я думаю)

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

И удаление # из действия в share_target

Чтобы исправить это, я сделал следующие вещи:

1. Добавлено следующее в маршрутизаторе, что привело к удалению # из всех URL-адресов

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

2. Удалил # из share_target.action в манифесте

Каким-то образом все это исправлено!