Question

我正在使用ASP.NET MVC构建SPA应用程序。

我的应用的切入点是/home/index。所有其他视图将通过ajax加载。

现在，例如，用户当前位于页面/home/index#/home/widgetdemo上。当他现在点击刷新按钮时，会发生以下情况：
加载索引视图，然后加载widgetdemo视图。这里的问题是索引视图被不必要地加载，因为在页面刷新时我们想要再次看到widgetdemo视图。但是在服务器端，我看不到网址的哈希片段，也无法知道用户是否想要索引或widgetdemo视图。

现在我有一个解决方案：

在初始应用程序加载或页面刷新时，检查客户端url中的现有哈希片段并加载片段部分而不是索引视图，或者如果没有片段存在加载索引视图。这基本上只在第一次加载（或页面刷新）时加载布局页面，我们决定客户端天气加载索引视图或另一个视图。 - ＆GT;这导致两次请求一次。

这里的最佳做法是什么？（Cookie是一种选择，但必须在每次请求时传输......）

修改

我是怎么做到的：在第一页加载或页面刷新时，我只加载布局页面，在文档加载时，我检查URL并确定要获取/调用的页面/操作。这很容易，但是在加载应用程序时你有两个请求，但是你不必乱用cookies / hiddden字段。

Answer 1

您始终可以在SessionStorage / LocalStorage上存储当前用户信息，并在加载检查时查看应该加载的内容。然而，这需要大量的管道工作。

当然某些浏览器不支持那些

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}


window.onbeforeunload = function() {
    localStorage.setItem('currentPlace', $.urlParam('param1'));

    // ... any other thing you want to store
}

window.onload = function() {

    var param = localStorage.getItem('currentPlace');

    // ... load what you want
}

sessionStorage vs localStorage的使用取决于您是否要在窗口关闭时保持值。

您也可以存储param1的任何其他部分而不是url。这只是一个样本。

更新：

根据评论（这是正确的）如果你有一个url的片段，除非他们关闭窗口，否则不需要存储任何东西。但是，如果您在不更改url的情况下加载页面的一部分，则可以使用上述技术存储最后加载的部分。

Answer 2

我认为您需要的是history.pushState（新HTML5历史记录API的一部分）可以解决的问题。

在https://css-tricks.com/using-the-html5-history-api/#pushState-example

上查看这个精彩的演示

很多人似乎都在使用history npm package，但我从未直接尝试过（我只是反应 - 路由器最终使用它）。

ASP.NET MVC SPA - 如何在单页面应用程序中处理页面刷新

2 个答案: