vue.js vue-routerのリンクで無理やり外部サイトへ飛ばす(リダイレクトする)方法

vue-routerを使ってるけど、router-linkで無理やり外部サイトへ飛ばしたいぜ!って時はこうする。

そもそも普通にaタグかlocationを書けば良いんだけど、何らかの事情でリンクをrouter-linkに統一したい人用。
vue-routerの基本的な使い方は各自ググってくれ。

HTML、vueのtemplete側

hogehoge

js、vue-router側のroutes設定

const routes = [
{ path: '/out/:link', component: {template: '
{{$route.params.link}}
',created() {location.href=this.$route.params.link}}}, ]

これで、/out/リンク先 のパスでテンプレートが表示された瞬間にリダイレクトされる。{{$route.params.link}}は確認用なので、問題なく動作するなら、削除してもいいと思う。
セキュリティとかは知らんで。

コメントする