pathの最後のセグメントを取得

commits2 min read

以下のようなURLで、1a3bda780051a2部分を取得する必要がある場合

https://sample.com/event/1a3bda780051a2

参考記事

URLの最後のセグメント

URL内で最後に出現した/文字を見つけるために lastIndexOf() 関数を使用し、次にその場所から始まる部分文字列を返すために substring() 関数を使用することもできます。
そうすることで、split()のように、すべてのURLセグメントを含む配列を作成しなくて済みます。

console.log(this.href.substring(this.href.lastIndexOf('/') + 1));

https://www.webdevqa.jp.net/ja/javascript/urlの最後のセグメント/972034775/
substring()関数

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring
JavaScriptを使用してパスまたはURLの最後のセグメントを取得する方法

https://tech-wiki.online/jp/how-to-get-last-item-path-javascript.html
substring()関数とは

文字列の一部を切り出しするsubstringの使い方

https://eng-entrance.com/java-string-substring
lastIndexOf()関数とは

指定の文字列が含まれているか検索し見つかった場合は位置を返す(indexOf, lastIndexOf)

https://www.javadrive.jp/javascript/string/index19.html

使用例

1. 特定のページでのみComponentを表示したいとき
default.vue
<template>
  <div>
    <Nuxt />
    // v-if="trueの時<Banner />が表示される"
    <div v-if="isBanner"> 
        <Banner />
    </div>
  </div>
</template>

<script>
import Banner from '../components/Banner.vue';
export default {
  components: { Banner },
  data() {
    return {
      isBanner: true,
    };
  },
  mounted() {
    let pathCurrent = this.$route.path; // 現在のpathを取得
    let pathLast = pathCurrent.substring(pathCurrent.lastIndexOf('/') + 1); // pathの最後のセグメントを取得

    // 現在のpathが、「/event/??????」のような場合の時のみ、isBannerをtrueにする
    if (pathCurrent == `/event/${pathLast}`) {
      this.isBanner = ture;
    } else {
      this.isBanner = flase;
    }
  },
  console.log(this.isBanner);
};
</script>
console
// https://sample.com/event/1a3bda780051a2
true

// https://sample.com/event/74a72c1b73cfc1
true

// https://sample.com/
false

// https://sample.com/event/
false
GitHubで編集を提案

Discussion

ログインするとコメントできます