Создайте полный URL другого маршрута в моем приложении Vue и скопируйте его в буфер обмена - PullRequest
Новая
       130

Создайте полный URL другого маршрута в моем приложении Vue и скопируйте его в буфер обмена

0 голосов
/ 11 декабря 2019

Мне нужен конкретный URL, чтобы пользователь мог скопировать его и получить доступ по этой ссылке. Но каждый раз, когда я пытаюсь сделать это в том же браузере, ссылка открывается. Но в другом браузере он изменяет URL и перенаправляет его на домашнюю страницу

шаблон приложения vue.js 

<vs-alert color="primary" title="Share this link " active="true">
         <vs-progress indeterminate color="primary"></vs-progress>
         <a :href="path">
         <span class="cursor-pointer" >  Copy Link  </span></a>
         {{ fullUrl }}
</vs-alert>

это скрипт 

computed:{
        path(){
           var paths = this.$router.resolve({name: 'recruiter-postedjob', params: {id: this.id}}).href 
           this.fullUrl = window.location + paths
           return paths
        },

когда в другом браузере я пытаюсь использовать ту же ссылку, она меняет ссылку на

http://localhost:8080/dashboard/JobDetails/5uZzQ2xlRuk1NyScuhqL/recruiter/postedjob/5uZzQ2xlRuk1NyScuhqL

Если кто-нибудь может сказать мне способ создания ссылки.

1 Ответ

0 голосов
/ 11 декабря 2019
  1. Если вы не хотите, чтобы браузер открывал ссылку, зачем вообще использовать <a>? В любом случае вам понадобится какое-то текстовое поле, потому что браузеры не позволяют JavaScript помещать что-либо в буфер обмена (отсутствует clipboard.push API). Если вы действительно хотите использовать <a>, вы должны запретить поведение браузера on click по умолчанию (переход к href) 
<a :href="path" @click.prevent.stop="onClick(path)"> Copy link </a>

Вы объединяете URL full вашей текущей страницы с относительным URL маршрута. Используйте window.location.origin вместо window.location в вычисляемом свойстве

Вам потребуется реализовать обработчик onClick для Скопировать вывод переменной JavaScript в буфер обмена

Рабочий пример

...