概要ページと詳細サブページがあります。すべてのルートは、次のvue-router
ようなプログラムナビゲーションを使用して(v 0.7.x)で実装されます。
this.$router.go({ path: "/link/to/page" })
ただし、概要ページからサブページにルーティングする場合は_target="blank"
、<a>
タグに追加する場合と同じように、新しいタブでサブページを開く必要があります。
これを行う方法はありますか?
概要ページと詳細サブページがあります。すべてのルートは、次のvue-router
ようなプログラムナビゲーションを使用して(v 0.7.x)で実装されます。
this.$router.go({ path: "/link/to/page" })
ただし、概要ページからサブページにルーティングする場合は_target="blank"
、<a>
タグに追加する場合と同じように、新しいタブでサブページを開く必要があります。
これを行う方法はありますか?
回答:
私はあなたがこのようなことをすることができると思います:
let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');
それは私のために働いた。ありがとう。
これは新しいバージョン(Vue Router 3.0.1)で可能になっているようです。
<router-link :to="{ name: 'fooRoute'}" target="_blank">
Link Text
</router-link>
this.$router.push()
。
答えがノーだと思っている人にとっては。githubの関連する問題を参照してください。
Q:新しいタブでvue-routerがリンクを開くことができますか?
A:いいえ。通常のリンクを使用してください。
質問で尋ねられたようなルートを定義する場合(パス: '/ 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'});
参照:
プロジェクトのどこか、通常は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>
次のような相対パスのみに関心がある場合は/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
。