Nuxt.jsで現在のurlを取得する方法

Nuxt.jsで現在のurlを取得する方法になります。

https://demosaite.com/demo/2?user=123

本記事では、上記のurlを例に解説しています。

基本的には、Vue Routerを使用することで取得できます。

template内で現在のurlを取得する

<template>
  <div>
    <p>{{ $route.fullPath }}</p> <!-- /demo/2?user=123 -->
    <p>{{ $route.name }}</p> <!-- demo-id -->
    <p>{{ $route.params }}</p> <!-- { "id": "2" } -->
    <p>{{ $route.path }}</p> <!-- /demo/2 -->
    <p>{{ $route.query.user }}</p> <!-- 123 -->
  </div>
</template>

template内では、$routeで現在のurlを取得することができます。

コンポーネントプロパティで現在のurlを取得する

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  mounted() {
    console.log(this.$route.params) // { "id": "2" }
    console.log(this.$route.query.user) // 123
  }
})
</script>

mountedなどのコンポーネントプロパティからは、thisをつけることで現在のurlを取得できます。

Nuxtのコンテキストでurlのクエリパラメータを取得する

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  asyncData({ route }) {
    console.log(route.path) // /demo/2
    console.log(route.name) // demo-id
  }
})
</script>

asyncDataやmiddlewareなどのNuxtのコンテキストからは、上記のようにurlを取得できます。

httpsなどを含む全てのurlを取得したい場合

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  mounted() {
    console.log(window.location.href)
    // https://demosaite.com/demo/2?user=123
  }
})
</script>

httpsなどを含む全てのurlを取得したい場合は、window.location.hrefを使うことで取得できます。