我使用Mithril.js创建我的个人网站/博客作为单页应用程序。我网站上的所有网页和博客帖子均使用Page
和Post
组件呈现,并根据网址中的:slug
加载正确的网页。
我遇到的问题是每当我尝试在页面之间切换时,页面内容都不会更新。在页面和帖子之间切换是有效的,因为我在Page
和Post
组件之间交替。但是,当我尝试连续两次使用相同的组件时,从页面到页面,它不会更新网页。
m.route(document.body, '/', {
// `Home` is a wrapper around `Page`
// so I can route to `/` instead of `/home`
'/': Home,
'/:slug': Page,
'/blog/:slug': Post
});
const Home = {
view() {
return m(Page, { slug: 'home' });
}
};
以下是Page
组件(Post
组件非常相似)。两个组件都能正确呈现。
const Page = {
content: {},
oninit(vnode) {
m.request({
method: 'GET',
url: 'content.json',
}).then((response) => {
Page.content = response.pages[vnode.attrs.slug];
});
},
view() {
if (Page.content) {
return [
m('#content', m.trust(Page.content.body))
];
}
}
};
为什么秘银不会认识到这个小块改变了?
答案 0 :(得分:1)
docs page for m.route
为您提供解决方案。
当用户从参数化路线导航到具有不同参数的相同路线时(例如,在给定路线
/page/1
的情况下从/page/2
到/page/:id
,将不会从因为两个路由都解析为同一个组件,因此导致虚拟dom就地差异。这会产生触发onupdate
挂钩的副作用,而不是oninit
/ {{1}但是,对于开发人员来说,想要将组件的重新创建与路由更改事件同步是相对常见的。