はじめに
Laravel + Nuxt.jsで開発中に、外部サイトへ遷移させたい箇所と、内部サイトへ遷移させたい箇所の実装で詰まってしまい、色々と調べたの備忘録として記載します。
開発状況（Version）
macOS Big Sur
Virtual Box 6.1.26
Laravel Mix 5.0
Laravel 6.20.4
PHP 7.3.29
node.js 16.13.2
Nuxt.js 6.14.11
Vue.js 2.6.14
方法
結論から言うと、
遷移先が、外部サイトor内部サイトによって実装方法が異なります。
外部サイトへの遷移
aタグで遷移
<a href="https://www.google.co.jp/">Google</a>or
<a :href="https://www.google.co.jp/">Google</a>scriptで遷移
<template>
<div>
<button @click="googleLink">Google</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
methods: {
googleLink() {
const url = 'https://www.google.co.jp/'
window.location.href = url ←このページからurlにページに遷移する
}
}
})
</script>or
<template>
<div>
<button @click="googleLink">Google</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
methods: {
googleLink() {
const url = 'https://www.google.co.jp/'
window.open(url, '_blank') ←このページとは異なる、別のタブを開きurlにページに遷移する
}
}
})
</script>内部サイトへの遷移
aタグで遷移
<a :href="`hogeDetail/${パラメータid}`">
HOGE
</a>nuxt-linkで遷移
<nuxt-link to="/home">HOME</nuxt-link>or
<nuxt-link
:to = "`hogeDetail/${パラメータid}`"
>
<button>HOGE</button>
</nuxt-link>$routerで遷移
<template>
<div>
<button @click="googleLink">Google</button>
</div>
</template>
<script>
new Vue({
el: "#app",
methods: {
googleLink(){
this.$router.push('/google'); ←このページのURL+'/google'に遷移する
}
}
})
</script>ちなみに
外部サイトへの遷移では、<nuxt-link to =””></nuxt-link>や、$routerは機能しません。←ココ私が詰まったポイントです。
最後に
色々な参考記事を参考にした結果、
ココに行き着きました。nuxt-linkなど、外部、内部サイトへ両方とも行ける雰囲気があったのですが、意外に遷移できず、手こずりました。
コメント