Vue-router bir bağlantıyı yeni bir sekmede açabilir mi?

Bir özet sayfam ve bir detay alt sayfam var. Tüm rotalar, aşağıdaki vue-routergibi programlı gezinme kullanılarak (v 0.7.x) ile uygulanır :

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

Ancak özet sayfasından alt sayfaya yönlendirdiğimde, alt sayfayı tıpkı _target="blank"bir <a>etikete ekleyerek yapacağım gibi yeni bir sekmede açmam gerekiyor .

Bunu yapmanın bir yolu var mı?

Bunun gibi bir şey yapabileceğinizi düşünüyorum:

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

benim için çalıştı. Teşekkürler.

Yeni sürümlerde artık bu mümkün gibi görünüyor (Vue Router 3.0.1):

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

Merak edenler için cevap hayırdır. Github'da ilgili konuya bakın .

S: Yeni sekme programında bağlantı yönlendirici açılabilir mi?

C: Hayır. Normal bir bağlantı kullanın.

Rotanızı soruda sorulduğu gibi tanımlamanız durumunda (yol: '/ 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
    }
  ]
})

Özet sayfanızdaki URL'yi çözebilir ve alt sayfanızı aşağıdaki gibi açabilirsiniz:

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

Elbette rotanıza bir ad verdiyseniz, URL'yi ada göre çözebilirsiniz:

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

...

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

Referanslar:

• vue-yönlendirici yönlendirici.resolve (konum, geçerli?, ekleme?)
• vue yönlendirici yönlendirici bağlantısı

Projenizde bir yerde, genellikle main.js veya router.js

import Router from 'vue-router'

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

Bileşeninizde:

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

Bence en iyi yol şunları kullanmaktır:

window.open("yourURL", '_blank');

🚀 * uçup gider *

Bu kodu yönlendirme dosyanıza yazmanız yeterlidir:

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

Bu benim için çalıştı

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

@Rafael_Andrs_Cspedes_Basterio cevabını değiştirdim

Eğer gibi göreli yollar üzerinde SADECE ilgilenen varsa: /dashboard, /aboutvb, diğer yanıtlara bakın.

https://www.google.comYeni bir sekme gibi mutlak bir yol açmak istiyorsanız , Vue Router'ın bunları idare etmek için OLMADIĞINI bilmelisiniz.

Ancak, bunu bir özellik isteği olarak görüyorlar. 1280 . Ama bunu yapana kadar,

İşte harici bağlantıları vue-router ile yönetmek için yapabileceğiniz küçük bir numara.

• Yönlendirici yapılandırmasına gidin (muhtemelen router.js) ve şu kodu ekleyin:

/* 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()
}

Şimdi, ne zaman mutlak URL'lerle uğraşsak bir çözümümüz var. Örneğin, google'ı yeni bir sekmede açmak için

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

Yeni bir sekmede başka bir sayfa açtığımızda kullanmamız GEREKİR noopener noreferrer.

Daha fazlasını buradan okuyun

Veya burada

Bu benim için çalışıyor:

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

Takılı (): this.url = `${window.location.origin}/your_page_name`;

Bir bağlantı etiketi kullanarak bunu yapmanın en basit yolu şudur:

<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
    Open Post in new tab
</a>