在 Angular 1.5 中刷新浏览器时如何保留相同的页面？

Posted 2023-03-13

【中文标题】在 Angular 1.5 中刷新浏览器时如何保留相同的页面？

【英文标题】：How to retain same page when browser is refreshed in Angular 1.5?

【发布时间】：2017-08-22 15:48:20

【问题描述】：

在我的项目中，路由器是这样设置的：

   myApp.component("rsapproot", 
        transclude: true,
        template: "<ng-transclude></ng-transclude>",
        $routeConfig: [
             path: "/login", component: "rsapplogin", name: "Login" ,
             path: "/tenant", component: "rsapptenantid", name: "Tenant" ,
             path: "/my-dashboard", component: "rsappmyrdash", name: "MyDash" ,
             path: "/my-reports", component: "rsappmyreports", name: "AppReports",
             path: "/equipment-details/:type/:id", component: "rsequipmentdetails", name: "EquipmentDetails" ,
             path: "/my/resources", component: "rsappresourceslist", name: "AppResourceList" ,

F5 之后或粘贴 URL 时的预期行为分别是重新加载当前路径或导航到所述路径，而不是加载初始应用程序路径。

我知道为了在重新加载app后保留页面，应该给出一个代表路径的url。

但是那个东西已经存在了，而且路径都是独一无二的。

那我错过了什么？

【问题讨论】：

您是否在启用 html5 模式的情况下使用它？

不行，它也可以与组件路由器一起使用。你能帮忙吗？

【参考方案1】：

这需要在服务器端处理。这是一个说明当前问题的示例：

您在其初始路径/ 加载应用程序，然后导航到/login。当您刷新页面时，您的网络浏览器随后会向 http://yourdomain.com/login 发送一个 GET 请求（我假设）不会通过将您的 Angular 应用程序 (index.html) 发送到客户端来响应。

您需要配置您的服务器以使用您的 index.html 响应所有指定 Angular 路径的 GET 请求。这通常使用包罗万象的路线/* 来完成，而不是单独指定每条路线。

【讨论】：

这是否意味着对于所有可能的路由，服务器将使用为该特定路由加载的适当模板进行响应？但这不是 Angular 路由器的用途吗？我有点困惑。

不完全。例如，http://yourdomain.com 会回复您的 index.html。为了使http://yourdomain.com/login 能够进行刷新，您的服务器还需要使用index.html 进行响应。一旦客户端收到该文件，Angular 路由器就可以接管