vue-routerは新しいタブでリンクを開くことができますか?


99

概要ページと詳細サブページがあります。すべてのルートは、次のvue-routerようなプログラムナビゲーションを使用して(v 0.7.x)で実装されます。

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

ただし、概要ページからサブページにルーティングする場合は_target="blank"<a>タグに追加する場合と同じように、新しいタブでサブページを開く必要があります。

これを行う方法はありますか?


3
vueルーターではそれが可能だとは思いません。URLを抽出してビルドしてからwindow.open(url、 '_ blank')を使用する可能性があります
Deepak 2016年

1
はい、彼らは公式にそれは不可能だと言っています。ありがとうございました。
Tang Jiong 2016年

以下にうまくいく答えがあります、あなたはあなたの質問への答えとしてそれを受け入れるべきです、あなたは思いませんか?
Andres Felipe

回答:


178

私はあなたがこのようなことをすることができると思います:

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

それは私のために働いた。ありがとう。


4
これは私にとって最良の方法のようです。まだ$ routerを使用して、ハッキーな文字列をマッシュアップせずにURLを作成してから、windowを使用して新しいタブを開きます。+1
ジョンスミス

2
アクセスしようとしているルートのURLがこのように変更された場合、これが最も完全な解決策です。いいね!
Nitzankin 2018

3
残念ながら、このメソッドはデフォルトのブラウザポップアップブロッカーによってブロックされます
Photonic

これがベストアンサーIMO
kaleazy19年

1
@Rafel、月、私はここにAnthoneゴアブック「フルスタックVue.js 2とLaravel 5」のgithubのソースコードに関連Vue.JSの質問を見て頂くようお願い致しstackoverflow.com/questions/59245577 /…?特に、OPのEDIT:セクションを見てください。
IstiaqueAhmed19年

127

これは新しいバージョン(Vue Router 3.0.1)で可能になっているようです。

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

しかし、パラメータを渡すことができるということではないようですか?リンク自体を開くだけです。正しい?
ゴッツ

@Gottsは、paramsとqueryparamsを渡すこともできます。そのためのコードを以下に示します<router-link:to = "{name: 'fooRoute'、params:{param_var: 'id_parameter'}、query:{query_var: 'query_params'}}" target = "_ blank" >リンクテキスト</ router-link>
PushkarShirodkar20年

これは<router-link>用であり、プログラムでは機能しないことに注意してくださいthis.$router.push()
jplindstrom

22

答えがノーだと思っている人にとっては。githubの関連する問題を参照してください。

Q:新しいタブでvue-routerがリンクを開くことができますか?

A:いいえ。通常のリンクを使用してください。


12
ありがとう、実際に問題は私によって開かれます。
Tang Jiong 2016年

5
追加することができるようになりましtarget="_blank"に対して<router-link>v3では、タグstackoverflow.com/a/49654382/2678454
thanksd

完全なURLを作成してwindow.openを使用する代わりに、これが非常に役立つことが
わかりました

15

質問で尋ねられたようなルートを定義する場合(パス: '/ 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'});

参照:


13

プロジェクトのどこか、通常は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にはいいかもしれません。console/loggingthis。$router.openが未定義を返すため
DexygenDec

このアプローチはプロトタイプを変更するため、お勧めできません。仕様の一部ではないため、ログに記録することはできません。
adi5 1820年

6

これは私のために働いた-

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

@Rafael_Andrs_Cspedes_Basterioの回答を変更しました


5

ルーティングファイルにこのコードを書くだけです:

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


3

次のような相対パスのみに関心がある場合は/dashboard/aboutなど、他の回答を参照してください。

次のような絶対パスを開いhttps://www.google.comて新しいタブに移動する場合は、Vueルーターがそれらを処理するためのものではないことを知っておく必要があります。

しかし、彼らはそれを機能要求と見なしているようです。#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を扱うときはいつでも、解決策があります。たとえば、グーグルを開いて新しいタブを開く

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

別のページを開いて新しいタブを開くときは常に、を使用する必要があることに注意してくださいnoopener noreferrer

詳細はこちら

またはここ


新しいウィンドウが開かない携帯電話を除くほとんどすべてのデバイスでうまく機能します!
javascript1108 9920

0

これは私のために働きます:

HTMLテンプレートの場合: <a target="_blank" :href="url" @click.stop>your_name</a>

Mounted()の場合: this.url = `${window.location.origin}/your_page_name`;


0

アンカータグを使用してこれを行う最も簡単な方法は次のとおりです。

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