Saya memiliki halaman ringkasan dan subhalaman detail. Semua rute diimplementasikan dengan vue-router
(v 0.7.x) menggunakan navigasi terprogram seperti ini:
this.$router.go({ path: "/link/to/page" })
Namun, ketika saya merutekan dari halaman ringkasan ke subhalaman, saya perlu membuka subhalaman di tab baru seperti yang dilakukan orang dengan menambahkan _target="blank"
ke <a>
tag.
Apakah ada cara untuk melakukan ini?
javascript
vue.js
vue-router
Tang Jiong
sumber
sumber
Jawaban:
Saya pikir Anda bisa melakukan sesuatu seperti ini:
let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}}); window.open(routeData.href, '_blank');
itu berhasil untuk saya. Terima kasih.
sumber
Sepertinya ini sekarang dimungkinkan di versi yang lebih baru (Vue Router 3.0.1):
<router-link :to="{ name: 'fooRoute'}" target="_blank"> Link Text </router-link>
sumber
this.$router.push()
.Bagi mereka yang bertanya-tanya, jawabannya tidak. Lihat masalah terkait di github.
sumber
target="_blank"
ke<router-link>
tag di v3 stackoverflow.com/a/49654382/2678454Jika Anda menentukan rute Anda seperti yang ditanyakan dalam pertanyaan (jalur: '/ link / ke / halaman'):
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 } ] })
Anda dapat menyelesaikan URL di halaman ringkasan Anda dan membuka sub halaman Anda seperti di bawah ini:
<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>
Tentu saja jika Anda telah memberi nama pada rute Anda, Anda dapat menentukan URL dengan nama:
routes: [ { path: '/link/to/page', component: MyComponent, name: 'subPage' } ] ... let route = this.$router.resolve({name: 'subPage'});
Referensi:
sumber
Di suatu tempat di proyek Anda, biasanya main.js atau router.js
import Router from 'vue-router' Router.prototype.open = function (routeObject) { const {href} = this.resolve(routeObject) window.open(href, '_blank') }
Di komponen Anda:
<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>
sumber
Saya pikir cara terbaik adalah dengan menggunakan:
window.open("yourURL", '_blank');
🚀 * terbang jauh *
sumber
Cukup tulis kode ini di file perutean Anda:
{ name: 'Google', path: '/google', beforeEnter() { window.open("http://www.google.com", '_blank'); } }
sumber
Ini berhasil untukku-
let routeData = this.$router.resolve( { path: '/resources/c-m-communities', query: {'dataParameter': 'parameterValue'} }); window.open(routeData.href, '_blank');
Saya mengubah jawaban @Rafael_Andrs_Cspedes_Basterio
sumber
Jika Anda tertarik HANYA pada path relatif seperti:
/dashboard
,/about
dll, Lihat jawaban lainnya.Jika Anda ingin membuka jalur absolut seperti:
https://www.google.com
ke tab baru, Anda harus tahu bahwa Vue Router TIDAK dimaksudkan untuk menanganinya.Namun, mereka tampaknya menganggap itu sebagai permintaan fitur. # 1280 . Tapi sampai mereka melakukan itu,
router.js
) dan tambahkan kode ini:/* 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)
Ingatlah bahwa setiap kali kita membuka halaman lain ke tab baru yang HARUS kita gunakan
noopener noreferrer
.Baca lebih lanjut di sini
atau Di Sini
sumber
Ini bekerja untuk saya:
Dalam template HTML:
<a target="_blank" :href="url" @click.stop>your_name</a>
Di mount ():
this.url = `${window.location.origin}/your_page_name`;
sumber
Cara termudah untuk melakukan ini menggunakan tag anchor adalah:
<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank"> Open Post in new tab </a>
sumber