क्या वी-राउटर एक नए टैब में एक लिंक खोल सकता है?

Question

मेरे पास एक सारांश पृष्ठ और एक विस्तार उपपृष्ठ है। सभी मार्ग vue-routerइस तरह प्रोग्रामेटिक नेविगेशन का उपयोग करके (v 0.7.x) के साथ कार्यान्वित किए जाते हैं :

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

हालांकि, जब उप-पृष्ठ के लिए सारांश पृष्ठ से मैं मार्ग, मैं जोड़कर बस के रूप में एक होगा एक नए टैब में उपपृष्ठ खोलने की आवश्यकता _target="blank"एक करने के लिए <a>टैग।

क्या इसे करने का कोई तरीका है?

Comments

मुझे नहीं लगता कि वाउ राउटर के साथ यह संभव है, आप अपने url को निकाल सकते हैं और बना सकते हैं और फिर window.open (url, '_blank') का उपयोग कर सकते हैं

— दीपक

हां, वे आधिकारिक तौर पर कहते हैं कि यह असंभव है। धन्यवाद।

— तांग जियोनग

नीचे एक जवाब है कि काम करता है, आपको स्वीकार करना चाहिए कि आपके सवाल पर प्रतिक्रिया के रूप में, आपको नहीं लगता?

— एंड्रेस फेलिप

Answer 1

मुझे लगता है कि आप ऐसा कुछ कर सकते हैं:

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

यह मेरे लिए काम किया। धन्यवाद।

Comments

यह मुझे सबसे अच्छा तरीका लगता है। यूआरएल बनाने के लिए आप अभी भी $ राउटर का उपयोग करते हैं, बिना किसी हैक किए स्ट्रिंग को एक साथ मैश करने के लिए, फिर नए टैब को खोलने के लिए विंडो का उपयोग करें। +1

— जॉन स्मिथ

यह सबसे पूर्ण समाधान है, यदि आप जिस रास्ते पर जाने की कोशिश कर रहे हैं उस मार्ग का url आपको जाँच में रखता है। अच्छा!

— निट्जांकिन

दुर्भाग्य से यह विधि कुछ डिफ़ॉल्ट ब्राउज़र पॉपअप ब्लॉकर द्वारा ब्लॉक हो जाती है

— फ़ोटोनिक

यह सबसे अच्छा जवाब IMO है

— kaleazy

@Rafel, मैं आप पूछ सकते हैं के लिए एक Vue.JS पर एक नज़र Anthone गोर द्वारा पुस्तक के GitHub 'पूर्ण ढेर Vue.js 2 और Laravel 5' में स्रोत कोड यहाँ से संबंधित सवाल stackoverflow.com/questions/59245577 / ? विशेष रूप से EDIT: OP के अनुभाग पर एक नज़र डालें?

— इस्तियाक अहमद

Answer 2

ऐसा लगता है कि यह अब नए संस्करणों में संभव है (Vue Router 3.0.1):

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

Comments

ऐसा नहीं लगता कि आप मापदंडों को पारित कर सकते हैं? बस लिंक स्वयं खोलें। सही बात?

— Gotts

@ डॉट्स आप पारित कर सकते हैं params और queryparams भी। ऐसा करने के लिए कोड नीचे दिया गया है <राऊटर-लिंक: से = "{नाम: 'fooRoute', params: {param_var: 'id_parameter'}, क्वेरी: {query_var: 'query_parameterams"}} "target =" _ blank " > लिंक टेक्स्ट </ राऊटर-लिंक>

— पुष्कर शिरोडकर

ध्यान दें कि यह <राऊटर-लिंक> के लिए है, यह प्रोग्रामेटिक रूप से काम नहीं करता है this.$router.push()।

— jplindstrom

Answer 3

जो जवाब सोच रहे हैं उनके लिए नहीं है। संबंधित मुद्दे पर देखें

प्रश्न: नए टैब प्रोगैमैटिक में लिंक-वाउ राउटर को खोल सकते हैं

A: नहीं। एक सामान्य लिंक का उपयोग करें।

Comments

धन्यवाद, वास्तव में मुद्दा मेरे द्वारा खोला गया है।

— तांग जियोनग

अब v3 stackoverflow.com/target="_blank"<router-link>

— //65654382

पूर्ण URL का निर्माण करने और window.open का उपयोग करने के बजाय यह बहुत उपयोगी पाया गया

— साईनाथ SR

Answer 4

उस स्थिति में जब आप अपने मार्ग को परिभाषित करते हैं जैसे प्रश्न में पूछा गया मार्ग (पथ: '/ लिंक / से / पृष्ठ'):

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
    }
  ]
})

आप अपने सारांश पृष्ठ में URL को हल कर सकते हैं और नीचे के रूप में अपना उप पृष्ठ खोल सकते हैं:

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

यदि आपने अपने मार्ग को एक नाम दिया है, तो निश्चित रूप से आप URL को नाम से हल कर सकते हैं:

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

...

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

संदर्भ:

• vue- राउटर राऊटर। हल (स्थान, वर्तमान ?, परिशिष्ट?)
• vue- राउटर राउटर-लिंक

Answer 5

कहीं न कहीं आपके प्रोजेक्ट में, आमतौर पर main.js या router.js

import Router from 'vue-router'

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

आपके घटक में:

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

Comments

नीचे मतदान नहीं, लेकिन शायद यह Vue3 के लिए अच्छा है? क्योंकि यह सांत्वना / लॉगिंग करता है। $ राऊटर। मेरे लिए अपरिभाषित रिटर्न

— डेक्सीजन

इस दृष्टिकोण को हतोत्साहित किया जाता है क्योंकि यह प्रोटोटाइप को उत्परिवर्तित करता है। आप इसे लॉग नहीं कर सकते, क्योंकि यह कल्पना का हिस्सा नहीं है।

— एडी ५१5

Answer 6

मुझे लगता है कि सबसे अच्छा तरीका बस का उपयोग करना है:

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

Away * उड़ जाता है *

Comments

अधिक दूर नहीं

— डेक्सिजन

Answer 7

इस कोड को अपनी रूटिंग फ़ाइल में लिखें:

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

Answer 8

इसने मेरे लिए काम किया-

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

मैंने @Rafael_Andrs_Cspedes_Basterio उत्तर को संशोधित किया है

Answer 9

अगर आप की तरह संबंधित पथ पर केवल रुचि कर रहे हैं: /dashboard, /aboutआदि, अन्य उत्तर देखें।

यदि आप एक निरपेक्ष पथ खोलना चाहते हैं: जैसे https://www.google.comकि एक नए टैब में, आपको यह जानना होगा कि Vue Router उन लोगों को संभालने के लिए नहीं है।

हालाँकि, वे इसे एक सुविधा-अनुरोध मानते हैं। # 1280 । लेकिन जब तक वे ऐसा नहीं करते,

---

---

यहां एक छोटी सी चाल है जो आप बाहरी राउटर के साथ बाहरी लिंक को संभालने के लिए कर सकते हैं।

• राउटर कॉन्फ़िगरेशन (शायद router.js) पर जाएं और इस कोड को जोड़ें:

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

अब, जब भी हम निरपेक्ष URL से निपटते हैं, हमारे पास एक समाधान होता है। उदाहरण के लिए google को एक नए टैब में खोलें

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

याद रखें कि जब भी हम किसी अन्य पेज को एक नए टैब में खोलते हैं जिसका हम उपयोग करते हैं noopener noreferrer।

और पढ़ें यहाँ

या इधर

Comments

मोबाइल फोन को छोड़कर लगभग सभी उपकरणों पर मेरे लिए अच्छा काम करता है, जहाँ नई विंडो नहीं खुलती है!

— javascript110899

Answer 10

यह मेरे लिए काम करता है:

HTML टेम्पलेट में: <a target="_blank" :href="url" @click.stop>your_name</a>

घुड़सवार में (): this.url = `${window.location.origin}/your_page_name`;

Answer 11

एंकर टैग का उपयोग करके ऐसा करने का सबसे सरल तरीका यह होगा:

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