Czy vue-router może otworzyć łącze w nowej karcie?


100

Mam stronę podsumowującą i szczegółową. Wszystkie trasy są zaimplementowane w vue-router(v 0.7.x) przy użyciu nawigacji programowej w następujący sposób:

this.$router.go({ path: "/link/to/page" })

Jednak gdy przechodzę ze strony podsumowania do podstrony, muszę otworzyć podstronę w nowej zakładce, tak jak dodając _target="blank"do <a>tagu.

Czy jest na to sposób?


4
Nie sądzę, żeby to było możliwe z routerem vue, możesz wyodrębnić i zbudować swój adres URL, a następnie użyć window.open (url, '_blank')
Deepak

1
Tak, oficjalnie mówią, że to niemożliwe. Dziękuję Ci.
Tang Jiong,

poniżej jest odpowiedź, która działa, powinieneś przyjąć ją jako odpowiedź na swoje pytanie, nie sądzisz?
Andres Felipe

Odpowiedzi:


180

Myślę, że możesz zrobić coś takiego:

let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');

U mnie to zadziałało.


4
Wydaje mi się, że to najlepsza droga. Nadal używasz $ routera do budowania adresu URL bez konieczności łączenia jakiegoś hackerskiego łańcucha, a następnie użyj okna, aby otworzyć nową kartę. +1
John Smith

2
Jest to najbardziej kompletne rozwiązanie, jeśli adres URL trasy, do której próbujesz uzyskać dostęp, zmienia się w ten sposób, dzięki czemu jesteś w szachu. miły!
Nitzankin

3
Niestety ta metoda jest blokowana przez domyślny program blokujący wyskakujące okienka przeglądarki
Photonic

To najlepsza odpowiedź IMO
kaleazy

1
@Rafel, czy mogę prosić o spojrzenie na pytanie Vue.JS związane z kodem źródłowym na githubie książki „Full-Stack Vue.js 2 and Laravel 5” autorstwa Anthone Gore tutaj stackoverflow.com/questions/59245577 /… ? W szczególności spójrz na sekcję EDYCJA: w PO?
Istiaque Ahmed

128

Wygląda na to, że jest to teraz możliwe w nowszych wersjach (Vue Router 3.0.1):

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>

Czy nie wygląda na to, że można przekazywać parametry? po prostu otwórz sam link. Poprawny?
Gotts

@Gotts możesz również przekazywać parametry i parametry zapytania. W tym celu należy podać kod <router-link: to = "{name: 'fooRoute', params: {param_var: 'id_parameter'}, query: {query_var: 'query_params'}}" target = "_ blank" > Tekst linku </router-link>
Pushkar Shirodkar

Zauważ, że to jest dla <router-link>, nie działa z nim programowo this.$router.push().
jplindstrom

22

Dla tych, którzy się zastanawiają, odpowiedź brzmi: nie. Zobacz powiązany problem na github.

P: Czy vue-router może otworzyć link w nowej zakładce progammaticaly

O: Nie, użyj zwykłego łącza.


12
Dziękuję, właściwie to ja otworzyłem sprawę.
Tang Jiong

5
Teraz można dodać target="_blank"do <router-link>tagu w wersji v3 stackoverflow.com/a/49654382/2678454
dzięki,

Okazało się to bardzo pomocne zamiast konstruowania pełnego adresu URL i używania window.open
Sainath SR

15

W przypadku, gdy określisz swoją trasę, taką jak ta zadana w pytaniu (ścieżka: '/ link / to / page'):

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent.vue';

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/link/to/page',
      component: MyComponent
    }
  ]
})

Możesz rozwiązać adres URL na swojej stronie podsumowania i otworzyć podstronę, jak poniżej:

<script>
export default {
  methods: {
    popup() {
      let route = this.$router.resolve({path: '/link/to/page'});
      // let route = this.$router.resolve('/link/to/page'); // This also works.
      window.open(route.href, '_blank');
    }
  }
};
</script>

Oczywiście, jeśli nadałeś swojej trasie nazwę, możesz rozwiązać adres URL według nazwy:

routes: [
  {
    path: '/link/to/page',
    component: MyComponent,
    name: 'subPage'
  }
]

...

let route = this.$router.resolve({name: 'subPage'});

Bibliografia:


13

Gdzieś w projekcie, zazwyczaj main.js lub router.js

import Router from 'vue-router'

Router.prototype.open = function (routeObject) {
  const {href} = this.resolve(routeObject)
  window.open(href, '_blank')
}

W twoim komponencie:

<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>

Nie w głosowaniu w dół, ale może to fajne dla Vue3? Ponieważ konsola / logowanie to. $ Router.open zwraca dla mnie undefined
Dexygen,

Takie podejście jest odradzane, ponieważ mutuje prototyp. Nie możesz tego zarejestrować, ponieważ nie jest to część specyfikacji.
adi518

6

To zadziałało dla mnie

let routeData = this.$router.resolve(
{
  path: '/resources/c-m-communities', 
  query: {'dataParameter': 'parameterValue'}
});
window.open(routeData.href, '_blank');

Zmodyfikowałem odpowiedź @Rafael_Andrs_Cspedes_Basterio


5

Po prostu zapisz ten kod w swoim pliku routingu:

{
  name: 'Google',
  path: '/google',
  beforeEnter() {                    
                window.open("http://www.google.com", 
                '_blank');
            }
}


3

Jeśli jesteś zainteresowany tylko na względnych ścieżek takich jak: /dashboard, /aboutetc, zobacz inne odpowiedzi.

Jeśli chcesz otworzyć absolutną ścieżkę, taką jak: https://www.google.comdo nowej karty, musisz wiedzieć, że Vue Router NIE jest przeznaczony do ich obsługi.

Wydaje się jednak, że uważają to za prośbę o dodanie funkcji. # 1280 . Ale dopóki tego nie zrobią,



Oto mała sztuczka, którą możesz zrobić, aby obsłużyć zewnętrzne łącza za pomocą vue-router.

  • Przejdź do konfiguracji routera (prawdopodobnie router.js) i dodaj ten kod:
/* Vue Router is not meant to handle absolute urls. */
/* So whenever we want to deal with those, we can use this.$router.absUrl(url) */
Router.prototype.absUrl = function(url, newTab = true) {
  const link = document.createElement('a')
  link.href = url
  link.target = newTab ? '_blank' : ''
  if (newTab) link.rel = 'noopener noreferrer' // IMPORTANT to add this
  link.click()
}

Teraz, gdy mamy do czynienia z bezwzględnymi adresami URL, mamy rozwiązanie. Na przykład, aby otworzyć Google na nowej karcie

this.$router.absUrl('https://www.google.com)

Pamiętaj, że ilekroć otwieramy kolejną stronę w nowej karcie, MUSIMY z niej skorzystać noopener noreferrer.

Przeczytaj więcej tutaj

lub tu


działa dobrze dla mnie na prawie wszystkich urządzeniach z wyjątkiem telefonów komórkowych, w których nowe okno się nie otwiera!
javascript110899

0

To działa dla mnie:

W szablonie HTML: <a target="_blank" :href="url" @click.stop>your_name</a>

W zamontowanym (): this.url = `${window.location.origin}/your_page_name`;


0

Najprostszym sposobem na zrobienie tego za pomocą tagu kotwicy jest:

<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
    Open Post in new tab
</a>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.