在单页 Svelte 应用程序中设置页面标题的最佳位置/生命周期方法

Question

在单页 Svelte 应用程序中设置页面标题的最佳位置/生命周期方法

Sco*_*tin 5 javascript single-page-application svelte

我开始使用 Svelte 并构建一个单页应用程序（使用page.js作为路由器）。我以为我有一个单独的组件来生成<svelte: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 &mdash; {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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

rix*_*ixo 7

对于一些原因，斯维尔特似乎不喜欢<title>在一个{#if}块......我建议一种计算值反应的语句来代替。

$: title = $pageName ? `Test App \u2014 ${$pageName}` : 'Test App'

Run Code Online (Sandbox Code Playgroud)

$pageName是一种特殊的语法，可以访问商店的值，而无需自己处理订阅/取消订阅 ( docs )。

即便如此，我发现我的浏览器（在 Chrome 中测试）显然可以<title>在返回时忽略DOM 中的。我们可以强制使用的值document.title来解决这个问题。另一个反应块可以解决这个问题：

$: {
  document.title = title
}

Run Code Online (Sandbox Code Playgroud)

所以你的整个Head.svelte组件现在看起来像这样：

<script>
  import { pageName } from '../stores.js'

  $: title = $pageName ? `Test App \u2014 ${$pageName}` : 'Test App'

  $: {
    document.title = title
  }
</script>

<svelte:head>
  <title>{title}</title>
</svelte:head>

Run Code Online (Sandbox Code Playgroud)

最后，在您的示例中，导航到时您不会更新商店的值/，因此在这种情况下您将拥有一个陈旧的标题。我认为您需要添加这样的路线：

page('/', () => app.$set({ route: null }))

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年前
查看次数：	1657 次
最近记录：	5 年，2 月前