নতুন ট্যাবে ভিউ-রাউটার কোনও লিঙ্ক খুলতে পারে?

Question 1

আমার একটি সংক্ষিপ্ত পৃষ্ঠা এবং একটি বিশদ উপ পৃষ্ঠা আছে। সমস্ত রুট vue-routerএইভাবে প্রোগ্রাম্যাটিক নেভিগেশন ব্যবহার করে (v 0.7.x) প্রয়োগ করা হয় :

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

যাইহোক, যখন উপপাতায় সারসংক্ষেপ পাতা থেকে আমি রুট, আমি যোগ করে ঠিক যেমন এক would একটি নতুন ট্যাবে উপপৃষ্ঠা খুলতে হবে _target="blank"একটি থেকে <a>ট্যাগ।

এই কাজ করতে একটি উপায় আছে কি?

Question 2

আমি মনে করি আপনি এই জাতীয় কিছু করতে পারেন:

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

এটা আমার জন্য কাজ করে। ধন্যবাদ

Question 3

দেখে মনে হচ্ছে এটি এখন আরও নতুন সংস্করণগুলিতে সম্ভব হয়েছে (ভিউ রাউটার 3.0.0):

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

Question 4

তাদের জন্য যারা উত্তরটি অবাক করছেন তারা হবেন না। গিতুব সম্পর্কিত সমস্যা দেখুন ।

প্রশ্ন: নতুন ট্যাব প্রোগাম্যাটিক্যালিতে লিংকটি খুলতে পারে

উত্তর: না, একটি সাধারণ লিঙ্ক ব্যবহার করুন।

Question 5

যদি আপনি আপনার রুটকে প্রশ্নে জিজ্ঞাসিত ব্যক্তির মতো সংজ্ঞায়িত করেন (পথ: '/ লিঙ্ক / টু / পৃষ্ঠা'):

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

আপনি আপনার সারাংশ পৃষ্ঠায় ইউআরএল সমাধান করতে এবং নীচের মত আপনার সাব পৃষ্ঠা খুলতে পারেন:

<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'});

তথ্যসূত্র:

ভিউ-রাউটার রাউটার.লম্বন (অবস্থান, বর্তমান ?, সংযোজন?)
ভিউ-রাউটার রাউটার-লিঙ্ক

Question 6

আপনার প্রকল্পের কোথাও, সাধারণত মেইন.জেস বা রাউটার.জেএস

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>

Question 7

আমি মনে করি সহজ উপায়টি সহজভাবে ব্যবহার করা:

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

🚀 * উড়ে চলেছে *

Question 8

আপনার রাউটিং ফাইলে কেবল এই কোডটি লিখুন:

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

Question 9

এটি আমার জন্য কাজ করেছে-

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

আমি @ রাফায়েল_আ্যান্ডারস_স্পেসিডেস_বেস্টেরিওর উত্তরটি পরিবর্তন করেছি

Question 10

যদি আপনি চান আপেক্ষিক পাথ শুধুমাত্র আগ্রহী: /dashboard, /aboutইত্যাদি অন্যান্য উত্তর দেখুন।

আপনি যদি https://www.google.comকোনও নতুন ট্যাবের মতো: একটি নিখুঁত পথ খুলতে চান তবে আপনাকে জানতে হবে ভ্যু রাউটারগুলি হ্যান্ডেল করার উদ্দেশ্যে নয়।

তবে, তারা এটিকে একটি বৈশিষ্ট্য-অনুরোধ হিসাবে বিবেচনা করবে বলে মনে হয়। # 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()
}

এখন, যখনই আমরা নিখুঁত ইউআরএলগুলি নিয়ে ডিল করি তখন আমাদের একটি সমাধান হয়। উদাহরণস্বরূপ একটি নতুন ট্যাবে গুগল খুলতে

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

মনে রাখবেন যে যখনই আমরা একটি নতুন ট্যাবে অন্য পৃষ্ঠা খুলি তখন আমাদের ব্যবহার করা উচিত noopener noreferrer।

এখানে আরও পড়ুন

বা এখানে

Question 11

এটি আমার পক্ষে কাজ করে:

এইচটিএমএল টেমপ্লেটে: <a target="_blank" :href="url" @click.stop>your_name</a>

মাউন্ট করা (): this.url = `${window.location.origin}/your_page_name`;

Question 12

অ্যাঙ্কর ট্যাগ ব্যবহার করে এটি করার সহজ উপায় হ'ল:

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