首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 7路由不能使用浏览器的后退按钮(散列更改不加载组件)

Angular 7是一种流行的前端开发框架,它提供了强大的路由功能来管理应用程序的导航。然而,有时候在使用Angular 7的路由时会遇到一个问题,即浏览器的后退按钮不能正确地加载组件,这通常是由于散列(hash)的更改导致的。

散列是URL中的一个片段,通常用于在单页应用程序中标识不同的路由。当散列发生更改时,浏览器不会重新加载整个页面,而是通过JavaScript来处理路由变化并加载相应的组件。然而,由于散列的更改不会触发浏览器的后退事件,因此在使用浏览器的后退按钮时,Angular 7的路由无法正确加载组件。

解决这个问题的一种方法是使用Angular提供的Location服务来监听浏览器的URL变化,并在URL变化时手动加载相应的组件。可以通过订阅Location服务的path()方法来实现这一点,然后在回调函数中根据URL的变化加载相应的组件。

另一种解决方法是使用Angular提供的HashLocationStrategy来处理路由。HashLocationStrategy会在URL中使用散列来标识路由,这样浏览器的后退按钮就能正确地加载组件。要使用HashLocationStrategy,可以在应用程序的路由模块中配置RouterModule,并将useHash属性设置为true。

在腾讯云的生态系统中,可以使用腾讯云的云服务器(CVM)来部署和运行Angular 7应用程序。腾讯云的云服务器提供了稳定可靠的计算资源,可以满足应用程序的需求。此外,腾讯云还提供了云数据库MySQL和云数据库MongoDB等数据库服务,可以用于存储和管理应用程序的数据。

对于前端开发人员,腾讯云提供了云开发(CloudBase)服务,它是一种无服务器的云开发平台,可以帮助开发人员快速构建和部署应用程序。云开发提供了丰富的功能和工具,包括云函数、云数据库、云存储等,可以大大简化开发流程。

总结起来,解决Angular 7路由不能使用浏览器的后退按钮的问题,可以使用Angular提供的Location服务或HashLocationStrategy来处理路由。在腾讯云的生态系统中,可以使用腾讯云的云服务器和云开发服务来部署和运行Angular 7应用程序。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-路由概述 顶

点击页面上链接,浏览器导航到新页面。 点击浏览器后退和前进按钮浏览器会前后浏览您浏览过网页历史记录。 Angular路由器借鉴了这种模式。...当用户点击按钮,从下拉框中选择,或者响应来自任何来源其他刺激时,您都可以进行命令式导航。并且路由器在浏览器历史记录中记录活动,所以后退和前进按钮也起作用。...配置 当浏览器URL更改时,路由器会查找相应RouteDefinition,从中可以确定要显示组件。 直到您配置它,路由器才有路由。 以下示例创建一些路由定义。...点击“返回”按钮,应用程序返回英雄列表,显示更改英雄名称。 注意名称更改立即生效。 如果您点击了浏览器后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。...点击浏览器后退按钮或“英雄”链接。 向上弹出一个对话框。 ? 您可以选择“OK”并丢失您更改,或单击“Cancel”并继续编辑。 这种行为后面是路由routerCanDeactivate挂钩。

6.1K20

HTML 面试要点:History 和 Hash 路由方式

# 为什么要使用路由 越来越多应用使用 Ajax 请求数据,浏览器 URL 不会发生任何变化。同时,浏览页面内容在用户下次使用 URL 访问时将无法重新呈现,使用路由可以很好地解决这个问题。...# 前端路由实现方法 路由需要实现以下功能: 当浏览器地址变化时,切换页面; 点击浏览器后退】、【前进】按钮时,网页内容跟随变化; 刷新浏览器,网页加载当前路由对应内容。...值不会随请求发送到服务器端,所以改变 hash,不会重新加载页面 监听 window hashchange 事件,当值改变时,可以通过 location.hash 来获取和设置 hash...值 location.hash 值变化会直接反应到浏览器地址栏 # 触发 hashchange 情况 浏览器地址变化(包括浏览器前进、后退)会触发 window.location.hash.../ 请求到服务器,请求完毕之后设置值为 #/home,此时触发 onhashchange 事件 当值改变浏览器地址栏 URL 哈希部分,按下回车,浏览器不会发送任何请求到服务器,只是设置值修改

76220

hash和history路由模式

为了实现前端路由,SPA需要监听URL变化,并据此渲染对应组件或页面不同部分,无需重新加载整个页面。下面让我们分别深入了解两种路由模式原理。...使用hashchange事件来监听 URL 变化,以下这几种情况改变 URL 都会触发 hashchange 事件:浏览器前进后退改变 URL、标签改变 URL、window.location改变...hash 模式:只将 hash 前面的部分当作地址 history 模式:会将地址栏中地址全部看作请求地址 hash模式优缺 兼容低版本浏览器Angular1.x和Vue默认使用就是hash路由...只有#符号之前内容才会包含在请求中被发送到后端,也就是说就算后端没有对路由全覆盖,但是不会返回404错误 hash值改变,都会在浏览器访问历史中增加一个记录,所以可以通过浏览器回退、前进按钮控制...能不能有一种方法,可以在不向服务器发送请求条件下,改变浏览器 URL,以此来实现“多页面”概念? 答案是有,Vue Router 就是官方开发一个插件,专门来做这件事。

12210

AngularDart4.0 英雄之旅-教程-07路由

在进行更改时,请通过重新加载浏览器窗口来保持运行。 行动计划 计划如下: 将AppComponent转换为仅处理导航应用程序外壳程序。...要在其他地方导航,用户可以单击AppComponent中两个链接之一,或单击浏览器后退按钮。...您将使用绑定到后退按钮事件连接此方法,您将添加到组件模板。...警告在模板中使用Angular管道之前,需要将其组件@Component注解pipes参数中。 您可以单独添加管道,或者为了方便起见,可以使用COMMON_PIPES组。...按钮点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。

17.5K30

大漠穷秋:全面解读Angular 4.0核心特性

摘要 基于最新Angular4.0版本,超级大咖大漠穷秋为我们讲解强大集成开发平台Angular/cli,以及Angular最核心3大概念:组件、模块、路由。...所以强烈推荐使用cnpm安装。 Angular/cli把打包、压缩等工作全部分装在命令行里面,并集成了test所有功能。...Router 如果没有router,浏览器前进后退按钮不能用,也无法把URL拷贝并分享给你朋友。...做异步路由时要注意是,写是loadchildren,加载对象是module而不是component。由此可见,NgModule是用来配合Angular/cli做模块打包和加载。...在Angular新版本里,module是最小打包和加载单位。 路由守卫用来防止未授权访问。

2.1K50

Blazor 中路由路由模板

目前所有 Web 开发框架都具有路由组件,Blazor 也例外。在本文中,我将探讨 Blazor 路由引擎实现和编程接口。 路由引擎 Blazor 路由引擎是在客户端运行组件。...在客户端上,路由器参与多种情况,最常见情况是用户单击链接、表单上提交按钮或下拉列表中触发服务器调用项。路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径整个过程。...毋庸置疑,当应用程序位置以编程方式更改时,路由器也会启动。最后一点也非常重要,路由器在浏览器历史记录中记录任何它负责位置更改,因此后退和前进按钮可以按用户期望工作。...路由实现是通过 SPA 框架(其中 Angular 最为出色)移动到客户端。让我们花点时间对合并 Angular 路由器和仍在使用 Blazor 路由器中功能进行简要比较。...在 Blazor 中,URL 模式或路由模板被收集在路由表中。该表通过查看使用 Route 属性修饰 Blazor 应用程序组件进行填充。每个组件路径都将成为受支持路由模板。

8.3K21

前端知识点总结vue篇(下)

Vue优点与缺点 优点: 组件化、响应式、单页面路由(SPA)、轻量级、渐进式(随意component是否使用、vuex是否使用) 缺点: 不利于SEO、不支持IE8以下(因为defineproperty...缺点: 初次加载耗时多,将JS、HTML、CSS统一加载 前进后退路由不能使用浏览器前进后退 SEO难度大 3....History模式: 通过history.pushState来切换地址栏路径,再通过监听popstate事件来操作浏览器回退和前进按钮。...如果发现没有浏览器API,路由会自动强制进入这个模式。 Hash和history区别 HashURL会更改浏览器可以前进和后退,但浏览器不会刷新并且不会和服务端交流。...在开发中可能有多个子组件依赖于父组件某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据 组件发生变化,所以 vue 推荐子组件修改父组件数据 21. vue如何动态添加属性

29520

Angular学习(01)-架构概览

路由 一个项目这么多模块,Angular 并不会一开始就把所有模块都加载,而是惰性加载,按需加载。 那么,什么时候会去加载呢?...就是等某个模块内部组件使用时候会加载,而组件是什么时候会被使用呢?...而页面的跳转,通常有以下几种场景: 用户输入 url 进行跳转 用户点击交互按钮进行跳转 用户操作前进或后退进行跳转 这些场景,路由工作机制都能够很好支持。...另一种方式是,在上层模块路由表中使用 loadChildren 加载各个功能模块,然后各个功能模块默认路由都显示成空视图,各自内部再通过配置 children 路由表方式来管理各个模块内部自己路由表...当然,上面举场景,也可以自己封装个按钮组件,然后在其他模板中,不使用原生按钮,而使用封装后按钮组件,也可以达到目的。

3.5K50

AngularDart4.0 英雄之旅-教程-08HTTP 顶

在进行更改时,请通过重新加载浏览器窗口来保持运行。 提供HTTP服务 您将使用Dart http软件包客户端类与服务器进行通信。...现在是时候添加创建和删除英雄能力了。 更新英雄细节 尝试在英雄详情视图中编辑英雄名字。 当你输入时,英雄名字在视图标题中被更新。 但是,如果您单击后退按钮更改将丢失。 更新之前没有丢失。...刷新浏览器更改英雄名称,保存更改,然后单击浏览器后退按钮。 现在应该继续进行更改。 添加加入英雄能力 要添加英雄,应用程序需要英雄名字。 您可以使用与添加按钮配对输入元素。...添加删除英雄能力 英雄视图中每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML中,位于重复元素中英雄名称之后。...如果用户使用鼠标操作粘贴文本,则会触发更改事件绑定。 正如所料,* ngFor从组件英雄属性重复英雄对象。 但正如你很快就会看到,英雄财产现在是一个英雄列表流,而不仅仅是一个英雄名单。

11K30

Angular v8 发布!来看看有什么新功能

由于 Angular 大量底层部分已经为此进行了更改,因此 Angular 团队特别注意与以前 Angular 版本兼容性:在切换到 Ivy 之后,现有的程序应该能够像以前一样工作。...这意味着在同一行、或对角线中不能有其他皇后。 n皇后问题一种解决方案 计算棋盘上所有可能解决方案算法被认为是计算密集型。...如果同一文件夹包含具有公共文件扩展名 .component.ts 同名组件,则 CLI 甚至会使用与 Web worker 通信代码对其进行丰富。...延迟加载Angular 出现第一天起,路由就支持延迟加载。...结论 Angular团队再次表达了自己观点:迁移到新 Angular 版本很容易,并且不需要进行大更改。使得使用 Google SPA 框架更加舒适。

3K30

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

用户在设计器中进行更改后,只需单击一下,就可以使用修改后Angular标记更新原始HTML文件。...安装它最简单方法是打开VS Code并转到Extensions窗格。 在搜索框中键入wijmo,然后单击“安装”按钮开始下载扩展。 出现时单击“重新加载按钮以完成安装。...对于具有集合控件(例如网格),设计器允许您添加,删除和修改单个成员。 在“属性”窗格中找到columns属性,然后单击属性编辑器右侧“显示项目”按钮以显示Angular标记中定义八个。...要返回FlexGrid表格控件设置,请单击“属性”窗格中后退按钮。 如果对设计器中所做更改感到满意,请单击WijmoJS 徽标下方“保存”按钮以更新原始源文件编辑器并将其重点关注。...接下来,单击图例属性齿轮图标,并将其位置设置更改为“底部”。 像以前一样单击后退按钮返回FlexChart设置。 通过将其标题属性设置为Most Active,为图表添加标题。

5.3K40

angular面试题及答案_angular面试

>,这种情况下就可以使用tag directive is used 7. router.navigate 使用?...此功能用于更改模板上输出;比如将字符串更改为大写并在模板上显示它。它还可以相应地更改日期格式。...angular路由使用base href 作为组件、模板基地址,开发期间,通常会在index.html所在目录中启动服务器,所以这个目录就是根目录,所以可以在index.html 顶部添加<base...Angular加载 默认情况下,在初始化时候所有路由都会加载,导致加载缓慢,启动速度慢,所以可以使用加载加载 : 通俗 讲就是进入主模块之后,子模块不加载,等真正访问到子模块之后,再去加载...) 7、服务(Services) 8、依赖注入(Dependency Injection) 9、路由(routing) 29.

10.8K120

JavaScript 高级程序设计(第 4 版)- BOM

,需要开发者自己管理 某些浏览器中,每个标签页会运行在独立进程中,如果一个标签打开了另一个,而window对象需要和另一个标签页通信,则新标签页不能运行在独立进程中(在这些浏览器中,将新开标签页opener...q=javascript#contents 属性 值 说明 location.hash #contents URL值,如果没有则为空字符串 location.host www.wrox.com:80...,除了hash外,设置location一个属性就会导致页面重新加载新URL 如果希望增加历史记录,可以使用replace()方法,重定向后后退按钮是禁用状态 reload() 能重新加载的当前显示页面...hashchange 会在页面 URL 变化时被触发,开发者可以在此时执行某些操作。 状态管理 API 则可以让开发者改变浏览器 URL 而不会加载新页面。...对象 点击“后退按钮直到返回最初页面时, event.state 会为 null 可以通过 history.state 获取当前状态对象,也可以使用replaceState()并传入与pushState

1.2K10

react-router 使用与优化

,并不会触发 popstate 事件,当点击浏览器前进或者后退按钮时才会触发该事件。...popstate 可以使用 history.length 来获取浏览器有多少个路由信息,即:当你点击前进或者后退时最多可以进行多少次。...window.location.replace("/") 表示重定向到某个页面,重定向相当于代替之前路由,之前那个路由不能后退回来。...在新 ES 标准中,有一个 import 异步加载模块语法,可以做到这一点。只是使用时需要下载有关包,因为兼容。在 create-react-app 中已经集成了这一功能。...webpackPrefetch 所用是:当浏览器空闲时(网络请求基本都请求完毕了),这时浏览器会在后台“偷偷”下载我们异步加载组件,这样当我们触发异步请求时其实组件数据已经在后台下载好了。

3.2K10

Vue路由详解(路由基础,路由轮播,路由传参,通配符路由)

Vue路由基础知识点: 1.router-view: 类似angular插座,用于承载路由切换组件 2.router-link: 类似angularrouterLink,区别是:vuerouter-link...是一个组件,直接充当a标签使用.但是在最后渲染时,vue还是会将其渲染成a标签 3.routes: 数组,用来做路由信息配置 4.router: 对象,通过该对象方法实现路由跳转,例如按钮点击实现跳转...5.route: 类似angularActiveRoute,用来获取路由传参组件创建和切换: a.在组件里写router-link标签,绑定to属性,to属性是一个对象,path属性里是当前组件路由路径...路由传参 1.通过query查询参数传参 内容组件接收头组件传来参数--query方式传递来参数存储在router对象里,使用this.$route方式获取该对象 MyHeader组件: <!...vue里params传值只能用name不能用path -- params方式传递来参数存储在router对象里,使用this.

3.1K21

你好,谈谈你对前端路由理解

既然单页面是这样渲染,那如果我有十几个页面要互相跳转切换,咋整!!??这时候 前端路由 应运而生,它出现就是为了解决单页面网站,通过切换浏览器地址路径,来匹配相对应页面组件。...我们通过一张丑陋图片来理解这个过程: ? 前端路由 会根据浏览器地址栏 pathname 变化,去匹配相应页面组件。...这就达到了无刷新页面切换效果,从侧面也能说明正因为无刷新,所以 React 、 Vue 、 Angular 等现代框架在创建页面组件时候,每个组件都有自己 生命周期 。...哈希模式 a 标签锚点大家应该陌生,而浏览器地址上 # 后面的变化,是可以被监听浏览器为我们提供了原生监听事件 hashchange ,它可以监听到如下变化: 点击 a 标签,改变了浏览器地址...浏览器前进后退行为 通过 window.location 方法,改变浏览器地址 接下来我们利用这些特点,去实现一个 hash 模式简易路由:在线运行 <!

96720

2021Vue.js面试题汇总及答案【全网最全 建议收藏】「建议收藏」

6.v-hide 隐藏内容(同angularng-hide) 7.v-if 显示与隐藏 (dom元素删除添加 同angularng-if 默认值为false) 8.v-else-if...答:包裹动态组件时,会缓存活动组件实例,主要用于保留组件状态或避免重新渲染; 使用:简单页面时 缓存: 缓存...5.SPA 页面采用keep-alive缓存组件 6.在更多情况下,使用v-if替代v-show 7.key保证唯一 8.使用路由加载、异步组件 9.防抖、节流 10.第三方模块按需导入...应用功能及显示效果, 需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载 2、前进后退路由管理:由于单页应用在一个页面中显示所有的内容, 所以不能使用浏览器前进后退功能...注意:push方法跳转会向 history 栈添加一个新记录,当我们点击浏览器返回按钮时可以看到之前页面。 2、go 页面路由跳转 前进或者后退this.

8.6K30

Vue面试经常会被问到

可以在该钩子中进一步地更改状态,不会触发附加重渲染过程。 updated(更新后) 在由于数据更改导致虚拟DOM重新渲染和打补丁之后调用。...URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。...;都提供合理钩子函数,可以让开发者定制化地去处理需求;都不内置数AJAX,Route等功能到核心包,而是以插件方式加载;在组件开发中都支持mixins特性。...在vue 2.1.0 版本之后,keep-alive新加入了两个属性: include(包含组件缓存) 与 exclude(排除组件缓存,优先级大于include) 。...缺点:不支持低版本浏览器,最低只支持到IE9;不利于SEO优化(如果要支持SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器导航按钮需要自行实现前进、后退

2.3K50

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

@angular/core会创建组件,渲染它,创建并呈现它后代。当@angular/core数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...Angular 2中路由工作原理是什么? 路由是能够让用户在视图/组件之间导航机制。Angular 2简化了路由,并提供了在模块级(延迟加载)下配置和定义灵活性。 ...在Angular2中,组件中发生任何改变总是从当前组件传播到其所有子组件中。如果一个子组件更改需要反映到其父组件层次结构中,我们可以通过使用事件发射器api来发出事件。...这通常用在setter中,当类中值被更改完成时。 可以通过模块任何一个组件使用订阅方法来实现事件发射订阅。...但是预编译应用程序会将所有模板和样式与组件对齐,因此到服务器Http请求数量会更少。 更快渲染:如果应用程序不是AOT编译,那么应用程序完全加载时,编译过程会发生在浏览器中。

17.3K80

前端开发需要了解路由跳转原理」

一般来说,这些路由插件总是提供两种不同方式路由方式: Hash 和 History,有时也会提供非浏览器环境下路由方式 Abstract,在 vue-router 中是使用了外观模式将几种不同路由方式提供了一个一致高层接口...Hash 1.1 相关 Api Hash 方法是在路由中带有一个 #,主要原理是通过监听 # 后 URL 路径标识符更改而触发浏览器 hashchange 事件,然后通过获取 location.hash...Hash 路由后退,可以将经历路由记录下来,路由后退跳转实现是对 location.hash 进行赋值。...():替换当前页在路由历史记录信息 popstate 事件:当活动历史记录发生变化,就会触发 popstate 事件,在点击浏览器前进后退按钮或者调用上面前三个方法时候也会触发,参见 MDN...2.2 实例 将之前例子改造一下,在需要路由跳转地方使用 history.pushState 来入栈并记录 cb,前进后退时候监听 popstate 事件拿到之前传给 pushState 参数并执行对应

1.2K30
领券