備忘録:SvelteKitで今いるURLを取得する

公式ドキュメント

SvelteKitではモジュール(Modules)と呼ばれている機能で、いろいろな便利情報が取得できて、$app/storesのpageを使うとURL周りの情報が取得できる。

結論

<script lang="ts">
	import { page } from '$app/stores';
</script>
あなたはいまここにますよ：{$page.url.href}

こんな感じ。

公式ドキュメントに書かれている通り、サブスクライブしないといけないので importはpageだけど使う時は$pageです。

他にも、公式ドキュメントのpageや型情報のところに一部書いていますが、

変数	例
$page.params.id	c1f0fe78-0dee-45a0-a2b3-4caaf7b0b6eb
$page.route.id	/works/programming/[id]
$page.url.href	http://localhost:5173/works/programming/c1f0fe78-0dee-45a0-a2b3-4caaf7b0b6eb
$page.url.origin	http://localhost:5173
$page.url.host	localhost:5173
$page.url.hostname	localhost
$page.url.port	5173
$page.url.pathname	/works/programming/c1f0fe78-0dee-45a0-a2b3-4caaf7b0b6eb

みたいな感じで取れます。

おまけ

ちなみに$pageを覗いてみると

{
  error: null,
  params: { id: 'c1f0fe78-0dee-45a0-a2b3-4caaf7b0b6eb' },
  route: { id: '/works/programming/[id]' },
  status: 200,
  url: URL {
    href: 'http://localhost:5173/works/programming/c1f0fe78-0dee-45a0-a2b3-4caaf7b0b6eb',
    origin: 'http://localhost:5173',
    protocol: 'http:',
    username: '',
    password: '',
    host: 'localhost:5173',
    hostname: 'localhost',
    port: '5173',
    pathname: '/works/programming/c1f0fe78-0dee-45a0-a2b3-4caaf7b0b6eb',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  },
  data: {
    //略
  },
  form: null
}

こんな感じ。

routeではディレクトリの構造がそのまま出てくるので、例えば(guest)みたいなgroupディレクトリ分けしているとそのディレクトリ名もそのまま出てくる。