vue-router สามารถเปิดลิงค์ในแท็บใหม่ได้หรือไม่?


97

ฉันมีหน้าสรุปและหน้าย่อยรายละเอียด เส้นทางทั้งหมดถูกนำไปใช้กับvue-router(v 0.7.x) โดยใช้การนำทางแบบโปรแกรมดังนี้:

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

อย่างไรก็ตามเมื่อฉันกำหนดเส้นทางจากหน้าสรุปไปยังหน้าย่อยฉันจำเป็นต้องเปิดหน้าย่อยในแท็บใหม่เช่นเดียวกับการเพิ่ม_target="blank"ลงใน<a>แท็ก

มีวิธีทำไหม?


3
ฉันไม่คิดว่าเป็นไปได้ด้วยเราเตอร์ vue คุณอาจแยกและสร้าง url ของคุณแล้วใช้ window.open (url, '_blank')
Deepak

1
ใช่พวกเขาบอกอย่างเป็นทางการว่าเป็นไปไม่ได้ ขอบคุณ.
Tang Jiong

มีคำตอบด้านล่างที่ใช้งานได้คุณควรยอมรับว่าเมื่อตอบคำถามของคุณคุณไม่คิดเหรอ
Andres Felipe

คำตอบ:


169

ฉันคิดว่าคุณสามารถทำสิ่งนี้ได้:

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

มันได้ผลสำหรับฉัน ขอบคุณ.


4
นี่เป็นวิธีที่ดีที่สุดสำหรับฉัน คุณยังคงใช้ $ router เพื่อสร้าง url โดยไม่ต้องผสมสตริงแฮ็กกี้เข้าด้วยกันจากนั้นใช้หน้าต่างเพื่อเปิดแท็บใหม่ +1
John Smith

2
นี่เป็นวิธีแก้ปัญหาที่สมบูรณ์ที่สุดหาก url ของเส้นทางที่คุณพยายามเข้าถึงเปลี่ยนแปลงวิธีนี้จะช่วยให้คุณตรวจสอบได้ ดี!
Nitzankin

3
น่าเสียดายที่วิธีนี้ถูกบล็อกโดยตัวบล็อกป๊อปอัปเริ่มต้นของเบราว์เซอร์
Photonic

นี่คือคำตอบที่ดีที่สุด IMO
kaleazy

1
@Rafel ฉันขอให้คุณดูคำถาม Vue.JS ที่เกี่ยวข้องกับซอร์สโค้ดใน github ของหนังสือ 'Full-Stack Vue.js 2 และ Laravel 5' โดย Anthone Gore ที่นี่stackoverflow.com/questions/59245577 / … ? โดยเฉพาะอย่างยิ่งลองดูที่ส่วนแก้ไข: ของ OP?
Istiaque Ahmed

124

ดูเหมือนว่าตอนนี้สามารถทำได้แล้วในเวอร์ชันใหม่กว่า (Vue Router 3.0.1):

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

ดูเหมือนว่าคุณสามารถส่งผ่านพารามิเตอร์ได้หรือไม่? เพียงแค่เปิดลิงค์เอง แก้ไข?
Gotts

@Gotts คุณสามารถส่ง params และ queryparams ได้ด้วย รหัสสำหรับการดำเนินการนั้นจะได้รับด้านล่าง <router-link: to = "{name: 'fooRoute', params: {param_var: 'id_parameter'}, query: {query_var: 'query_params'}}" target = "_ blank" > ข้อความลิงก์ </router-link>
Pushkar Shirodkar

ทราบว่านี้เป็นสำหรับ <เราเตอร์เชื่อมโยง> this.$router.push()มันไม่ทำงานกับโปรแกรม
jplindstrom

22

สำหรับผู้ที่สงสัยคำตอบคือไม่ ดูปัญหาที่เกี่ยวข้องใน github

ถาม: vue-router สามารถเปิดลิงค์ในแท็บใหม่ progammaticaly

ตอบ: ไม่ใช้ลิงก์ปกติ


12
ขอบคุณจริงๆฉันเป็นคนเปิดปัญหา
Tang Jiong

5
ตอนนี้สามารถเพิ่มลงtarget="_blank"ใน<router-link>แท็กใน v3 stackoverflow.com/a/49654382/2678454 ได้แล้ว
ขอบคุณ

พบว่าสิ่งนี้มีประโยชน์มากแทนที่จะสร้าง URL แบบเต็มและใช้ window.open
Sainath SR

14

ในกรณีที่คุณกำหนดเส้นทางเช่นเดียวกับที่ถามในคำถาม (path: '/ 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
    }
  ]
})

คุณสามารถแก้ไข 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'});

อ้างอิง:


11

ที่ไหนสักแห่งในโปรเจ็กต์ของคุณโดยทั่วไปคือ 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>

ไม่ลงคะแนน แต่อาจจะดีสำหรับ Vue3? เนื่องจากคอนโซล / บันทึกสิ่งนี้ $ router.open ส่งคืนไม่ได้กำหนดไว้สำหรับฉัน
Dexygen

แนวทางนี้ไม่สนับสนุนเมื่อมันกลายพันธุ์ต้นแบบ คุณไม่สามารถบันทึกได้เนื่องจากไม่ใช่ส่วนหนึ่งของข้อมูลจำเพาะ
adi518


4

เพียงเขียนโค้ดนี้ในไฟล์เส้นทางของคุณ:

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

4

สิ่งนี้ใช้ได้ผลสำหรับฉัน -

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

ฉันแก้ไขคำตอบของ @Rafael_Andrs_Cspedes_Basterio


3

หากคุณมีความสนใจเฉพาะในทางญาติที่ชอบ: /dashboard, /aboutฯลฯ ดูคำตอบอื่น ๆ

หากคุณต้องการเปิดเส้นทางสัมบูรณ์เช่นhttps://www.google.comไปยังแท็บใหม่คุณต้องรู้ว่า Vue Router ไม่ได้มีไว้เพื่อจัดการกับสิ่งเหล่านั้น

อย่างไรก็ตามดูเหมือนว่าพวกเขาจะพิจารณาว่าเป็นคำขอคุณลักษณะ # 1280 . แต่จนกว่าพวกเขาจะทำเช่นนั้น



นี่คือเคล็ดลับเล็ก ๆ น้อย ๆ ที่คุณสามารถทำได้เพื่อจัดการลิงก์ภายนอกด้วย vue-router

  • ไปที่การกำหนดค่าเราเตอร์ (อาจ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โปรดจำไว้ว่าเมื่อใดก็ตามที่เราเปิดหน้าอีกครั้งเพื่อให้แท็บใหม่เราจะต้องใช้

อ่านเพิ่มเติมที่นี่

หรือที่นี่


ใช้งานได้ดีสำหรับฉันบนอุปกรณ์เกือบทั้งหมดยกเว้นโทรศัพท์มือถือที่หน้าต่างใหม่ไม่เปิด!
javascript110899

0

สิ่งนี้ใช้ได้กับฉัน:

ในเทมเพลต HTML: <a target="_blank" :href="url" @click.stop>your_name</a>

ติดตั้ง (): this.url = `${window.location.origin}/your_page_name`;


0

วิธีที่ง่ายที่สุดในการทำสิ่งนี้โดยใช้แท็ก anchor คือ:

<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
    Open Post in new tab
</a>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.