更改路线时防止 Meteor/Iron 路由器重新加载答案

【问题标题】：Prevent Meteor/Iron Router from reloading when changing Routes更改路线时防止 Meteor/Iron 路由器重新加载
【发布时间】：2015-12-25 06:29:28
【问题描述】：

我注意到每次 Meteor/Iron Router 更改路由时，整个页面都会刷新。

为什么会发生这种情况，我该如何预防？

我为每条新路线设置路线的方式都是这样的......

Router.route('/route/:_some_param', {
    name: 'something',
    onBeforeAction: function(){ // Something },
    waitOn: function(){ // Some subscription },
    action: function(){ // Something },
})

我用这种方式设置了几条路线。每当我从一个页面移动到另一个页面时，Meteor 都会重新加载整个页面。但是，当我停留在一条路线上并仅更改参数时，Meteor 只会重新加载必要的内容，这正是我一直想要的。

【问题讨论】：

遇到完全相同的问题...您设法解决了吗？奇怪的是，有时点击锚点会执行传统的 Iron Router 行为，而其他锚点会执行整页重新加载。
@user1348303 在下面查看我的答案。这可能有助于阐明为什么您会看到路线之间的这种差异。

标签： meteor iron-router

【解决方案1】：

我相信您所观察到的是 Iron Router 工作原理的基础。您使用{{> yield }} 模板占位符创建一个主模板，Iron Router 将其替换为该给定路由指定的模板。如果您选择不同的路线，{{> yield }} 现在将指向新模板，因此页面的该部分将被重新渲染。您可以通过在主模板中最小化 {{> yeild }} 的范围来最小化被换出的页面数量。

例如，在我的模板中，我有一个像这样的页眉和页脚：

<html>
  {{> header }}
  {{> yield }}
  {{> footer }}
</html>

当我浏览路线时，页眉和页脚根本不会更新，只是它们之间的“胆量”。

【讨论】：

不，我认为这里确实存在问题。有时更改路线会导致浏览器完全刷新。 FWIW，到目前为止，当我在路径 / 更改我的路线时，我只遇到了完整的浏览器刷新。
页面重新加载与页面重新渲染不同。

【解决方案2】：

您究竟是如何更改页面的？如果您使用传统的锚标签作为锚工具，Meteor 将重新加载整个页面。

例如，如果您在模板之间导航并使用这种结构：

<a href="/pathToTemplate">Let's go to the new template!</a>

Meteor 将重新加载整个页面，因为您实际上是在使用锚标记来告诉浏览器更改路由。但是，如果你使用这种结构：

<a href="{{pathFor 'yourTemplateName'}}">To the new template ahoy!</a>

该链接将告诉 Iron Router 为您更改模板并仅刷新您在 {{> yield}} 区域中的代码。要将链接指向正确的页面，请确保将路由器中 name:... 字段中列出的任何内容放在 pathFor 帮助程序的 'yourTemplateName' 部分中。

简而言之，您获得全浏览器刷新的原因很可能是因为您使用浏览器在链接之间进行转换，而不是使用内置的 Meteor 和 Iron Router 助手来计算过渡。您可以使用此帮助程序做更多事情，如果您需要更多信息，我建议您查看Iron Router's Git page 上的路径和链接模板帮助程序部分。

如果您只需要刷新页面的某些部分而其余部分保持不变，那么我会参考 CodeChimp 的答案，因为它是合理的。如果您需要用于各种内容的各种布局模板，Layouts 部分应该可以帮助您更好地编写代码，甚至可能让您像只有动作英雄坚定地从爆炸的建筑物中走开一样，露出假笑。

您可能会发现的另一种情况是，如果您需要使用链接来执行操作，但您不希望浏览器劫持事件并重新呈现页面。在这种情况下，您可以像往常一样设置 HTML，然后通过它的 id、类或标签名称来定位接收点击事件的元素，并在与您的模板对应的 javascript 文件中使用以下代码结构。这对于提交表单很有用，它触发 Meteor 方法，该方法在服务器中执行某些操作，然后返回必要的数据（通常是重定向函数）等等。

因此，如果您在模板 crazyStuffIsAboutToHappen 上，并且您想在单击 ID 为 #triggerCrazyStuff 的链接时调用名为 doCrazyStuff 的 Meteor 方法，然后让 Meteor 将您的用户重定向到模板 @ 987654331@，您将使用以下结构。

Template.crazyStuffIsAboutToHappen.events(
  'click #triggerCrazyStuff': (e) ->
    e.preventDefault()  # to stop the browser from hijacking the event

    # -- error handling and pre-submit validation and yadda yadda --        

    Meteor.call('doCrazyStuff', --arguments--, (error, result) ->
      if error
        # handle the error + short-circuit the function. 
        return throwError(error.reason)  

      Router.go('theHouseThatCrazyBuilt, {--args--})
)

是的，Template.TEMPLATE_NAME.events 区域对于所有其他 JS 事件也非常方便，例如 MouseEnter 等等。

编码愉快！

【讨论】：

【解决方案3】：

如果您有一条路线：

路径为 /

有一个返回[]的订阅函数

它可能会触发不需要的重新加载。

添加一个虚拟订阅来修复。

见： https://github.com/iron-meteor/iron-router/issues/1149#issuecomment-72520329

【讨论】：

【解决方案4】：

不确定这是否对其他人有帮助，但我一直在寻找并寻找答案并最终想通了 - 基本上，每次我单击特定链接时 Iron Router 都很难刷新（硬重新加载，往返服务器）整个页面。

事实证明，我已经用过href，它往返于服务器以查找那里的路由（我假设这就是 Iron Router 处理服务器端路由的方式）。

基本上，我的路线如下：

/item
/items/:id

我有一个指向

的链接

/item/1234

当我将其更正为

/items/1234

一切都按预期进行。

【讨论】：