如何从客户端路由响应式获取URL？适配SPA点击<a>标签场景

你遇到的问题是因为直接执行console.log($page.url.pathname)只会在组件初始化或页面重载时运行一次，而$page作为响应式store，需要监听它的变化才能在客户端路由切换时触发逻辑。

以下是两种可行的解决方案：

方案一：使用Svelte响应式语句 #

利用Svelte的$:响应式声明，每当$page的值发生变化（包括客户端路由切换），代码块都会自动执行：

<script>
  import { page } from '$app/stores';

  // 路由切换时自动触发
  $: {
    const currentPath = $page.url.pathname;
    console.log('当前URL路径：', currentPath);
    // 在这里添加你需要的业务逻辑
  }
</script>

方案二：使用watch函数监听store变化 #

通过Svelte内置的watch函数监听page store的变化，更灵活控制触发时机：

<script>
  import { page } from '$app/stores';
  import { watch } from 'svelte';

  // 监听page store的变化
  watch(page, (newPageState) => {
    const currentPath = newPageState.url.pathname;
    console.log('当前URL路径：', currentPath);
    // 处理你的业务逻辑
  }, { immediate: true }); // immediate: true 会在组件初始化时先执行一次
</script>

这两种方式都能在保留SPA特性的前提下，在点击<a>标签触发客户端路由切换时，实时获取最新的URL路径。

内容的提问来源于stack exchange，提问作者DSR