我开始使用Svelte并构建一个单页应用程序（使用page.js作为路由器）。我以为我会有一个单独的组件来生成<svelte:head>块，并且在安装每个组件时，它将页面标题写入存储，然后由head组件读取。它部分起作用-当我单击进入其他页面时，页面标题会更新。但是，如果我返回浏览器的历史记录，则标题不会随页面一起更改。如果我随后重新加载页面，它确实会更改。因此，onMount()可能不是正确的生命周期方法。我可以采用哪种方法来与历史状态导航一起使用？
这是我的应用程序精简为一个最小的示例。
// index.js
import page from 'page'
import App from './views/App.svelte'
const app = new App({
target: document.body,
props: {
route: null,
},
})
function one() {
app.$set({ route: 'one' })
}
function two() {
app.$set({ route: 'two' })
}
page('/one', one)
page('/two', two)
page()
// App.svelte
<script>
import One from './One.svelte'
import Two from './Two.svelte'
import Head from '../parts/Head.svelte'
import Home from './Home.svelte'
export let route
</script>
<Head />
{#if route === 'one'}
<One />
{:else if route === 'two'}
<Two />
{:else}
<Home />
{/if}
// Head.svelte
<script>
import { pageName } from '../stores.js'
let displayPageName
pageName.subscribe(value => {
displayPageName = value
})
</script>
<svelte:head>
{#if displayPageName}
<title>Test App — {displayPageName}</title>
{:else}
<title>Test App</title>
{/if}
</svelte:head>
// stores.js
import { writable } from 'svelte/store'
export const pageName = writable(null)
// Home.svelte
<a href="/one">One</a> <a href="/two">Two</a>
// One.svelte
<script>
import { onMount } from 'svelte'
import { pageName } from '../stores.js'
onMount(async () => {
pageName.update(() => 'Component One')
})
</script>
<a href="/two">Two</a>
// Two.svelte
<script>
import { onMount } from 'svelte'
import { pageName } from '../stores.js'
onMount(async () => {
pageName.update(() => 'Component Two')
})
</script>
<a href="/one">One</a>
由于某些原因，Svelte似乎不喜欢<title>块中的{#if} ...我建议改为在reactive statement中计算值。