Question

我使用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))
      ];
    }
  }
};

为什么秘银不会认识到这个小块改变了？

Answer 1

docs page for m.route为您提供解决方案。

当用户从参数化路线导航到具有不同参数的相同路线时（例如，在给定路线/page/1的情况下从/page/2到/page/:id，将不会从因为两个路由都解析为同一个组件，因此导致虚拟dom就地差异。这会产生触发onupdate挂钩的副作用，而不是oninit / {{1}但是，对于开发人员来说，想要将组件的重新创建与路由更改事件同步是相对常见的。

当路线改变时，秘银组件不会更新

1 个答案: