在单页Svelte应用程序中设置页面标题的最佳位置/生命周期方法
在单页Svelte应用程序中设置页面标题的最佳位置/生命周期方法
提问于 2019-11-23 23:41:54
我开始使用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>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-25 09:21:35
由于某些原因，Svelte似乎不喜欢<title>在一个{#if}块.我建议计算反应语句中的值。
$: title = $pageName ? `Test App \u2014 ${$pageName}` : 'Test App'$pageName是一种特殊的语法，用于访问存储的值，而不必处理订阅/取消订阅(文档)。
即使这样，我也发现我的浏览器(在Chrome中测试过)在返回时忽略DOM中的<title>显然没有问题。我们可以强制使用document.title的值来解决这个问题。另一个反应块可以处理这个问题：
$: {
document.title = title
}所以您的整个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>最后，在您的示例中，当您导航到/时，您不会更新商店的值，因此在本例中您将有一个陈旧的标题。我认为你需要添加一条这样的路线：
page('/', () => app.$set({ route: null }))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59013329
复制相关文章
相似问题
腾讯云开发者
