web-dev-qa-db-ja.com

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

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

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

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

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

javascriptvue.jsvue-router
55
Tang Jiong

次のようなことができると思います。

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

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

77
Rafael Andrs Cspedes Basterio

これは、新しいバージョン（Vue Router 3.0.1）で可能になったようです：

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

不思議に思う人は答えはノーです。 githubの関連する issue を参照してください。

Q：vue-routerは新しいタブでリンクをプログラム的に開くことができます

A：いいえ。通常のリンクを使用します。

18
wanyama_man

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

参照：

8
Yuci

プロジェクトのどこか、通常は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>
4
Alice Chan

私は最善の方法は単に使用することだと思います：

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

？？？？* 飛び去ります *

1
Nada Le Coupanec

ルーティングファイルに次のコードを記述するだけです。

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