Question

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

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

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

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

我有这样设置的几条路线。每当我从一个页面移动到另一个页面时，Meteor会重新加载整个页面。然而，当我停留在一条路线上并且只是改变参数时，Meteor只会重新加载必要的东西，这就是我一直想要的东西。

Answer 1

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

例如，在我的模板中，我有一个标题和页脚如下：

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

当我浏览路线时，页眉和页脚根本不会更新，只有＆＃34; guts＆＃34;他们之间。

Answer 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为您更改模板，只刷新{{＆gt;屈服}}区域。要将链接指向正确的网页，请确保在name:...帮助器的'yourTemplateName'部分中放置路由器中pathFor字段中列出的内容。

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

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

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

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

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等等）也非常方便。

快乐的编码！

Answer 3

如果您有以下路线：

路径为/

有订阅功能，返回[]

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

添加虚拟订阅以修复。

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

Answer 4

不确定这是否会对其他人有所帮助，但我正在搜索并寻找答案并最终弄明白 - 基本上，每次我点击特定链接时铁路由器都很难刷新（硬重装，圆形跳闸到服务器）整个页面。

事实证明，我已经胖了手指href，并且它正在向服务器转发以寻找那里的路线（我假设这是Iron Router处理服务器端路由的方式）。

基本上，我有以下路线：

/item
/items/:id

我有一个指向

的链接

/item/1234

当我更正

时

/items/1234

一切都按预期工作。

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

4 个答案: