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

刷新时,Angular项目未重新路由

当Angular项目在刷新时,未重新路由可能是由于以下原因导致的:

  1. 缓存问题:浏览器可能会缓存Angular应用的某些资源,包括路由配置和组件模板。当刷新页面时,浏览器会尝试从缓存中加载这些资源,而不重新请求服务器。这可能导致路由未重新加载,从而导致页面内容没有更新。

解决方法:可以通过在Angular应用的路由配置中添加缓存控制头来解决这个问题。例如,在服务器端设置适当的缓存控制头,如Cache-Control和Expires,以确保浏览器在刷新时重新请求路由配置和组件模板。

  1. 服务器配置问题:如果服务器配置不正确,可能会导致在刷新时未重新路由。例如,服务器可能没有正确地处理Angular路由的HTML5模式,导致在刷新时返回404错误。

解决方法:可以通过在服务器上进行适当的配置来解决这个问题。例如,在Apache服务器上,可以使用.htaccess文件来启用HTML5模式,并确保所有路由都指向Angular应用的入口文件。

  1. 路由配置问题:如果Angular应用的路由配置有问题,也可能导致在刷新时未重新路由。例如,可能缺少某些路由配置,或者路由配置中的路径不正确。

解决方法:检查Angular应用的路由配置,确保所有需要的路由都被正确地定义。确保路径与组件的正确关联,并确保没有任何冲突或重复的路径。

总结起来,当Angular项目在刷新时未重新路由,可能是由于缓存问题、服务器配置问题或路由配置问题导致的。解决方法包括添加缓存控制头、正确配置服务器和检查路由配置。

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

相关·内容

Vue路由嵌套刷新后页面没有重新渲染

Vue路由嵌套刷新后页面没有重新渲染 强烈推介IDEA2020.2破解激活,IntelliJ...IDEA 注册码,2020.2 IDEA 激活码 问题 在路由嵌套,如果此时地址栏到了子路由下面,刷新页面路由地址肯定不会有变化,那么此时会出现子路由页面没有重新渲染的情况。...解决方法 方法1 在子路由的容器在router-view中加上条件渲染 v-if ,默认为true。...让它显示出来,在父路由重新渲染完成后,将条件渲染的值变为false,在修改渲染条件数据之后使用 $nextTick,再将条件渲染的值变为true,相当于重新加载了一次子路由。...,所以对其进行重新加载渲染,同理,另一种方法是给容器router-view一个key值即可完美解决,每次刷新的随机值都让容器看上去是一个新的。

1.4K30
  • Vue.js项目刷新当前路由(页面)的方法与实践

    前言 越来越多的前端项目使用MVVM框架Vue.js进行架构开发,充分利用了Vue.js的数据驱动、双向数据绑定、组件化开发以及其优秀的社区生态(官网+第三方扩展支持)等能力。...Vue-Router是Vue的黄金伴侣,用于设置路由,管理路由,优秀的钩子函数,简洁粗暴的配置,让它总是那么受人欢迎! But,但是(人生总是需要些转折,有些惊喜不是....)...使用Vue-Router在进行路由配置也会带来些问题: 重新进入当前路由,页面是不进行刷新的 在进行列表类数据操作:新增、删除、编辑可能需要让当前页面刷新 下面就跟随胡哥的风骚走位,一起来探究刷新当前路由...$router.go(0)函数,可以强制刷新当前页面 使用window.location.href或者window.location.reload(),强制刷新当前页面 问题: 此两种处理都会是当前页面进行刷新...,浏览器进行重新加载,出现页面闪烁和空白,极大的降低了用户体验。

    9.2K20

    Angular 从入坑到挖坑 - 路由守卫连连看

    四、Step by Step 4.1、基础准备 重复上一篇笔记的内容,搭建一个包含路由配置的 Angualr 项目 新建四个组件,分别对应于三个实际使用到的页面与一个设置为通配路由的 404 页面 --...在跳转到组件前获取某些必须的数据 离开页面,提示用户是否保存提交的修改 Angular 路由模块提供了如下的几个接口用来帮助我们解决上面的问题 CanActivate:用来处理系统跳转到到某个路由地址的操作...4.2.3、CanDeactivate:处理用户提交的修改 当进行表单填报之类的操作,因为会涉及到一个提交的动作,当用户没有点击保存按钮就离开,最好能暂停,对用户进行一个友好性的提示,由用户选择后续的操作...[RouterModule.forChild(routes)], exports: [RouterModule] }) export class CrisisRoutingModule { } 重新运行项目...,框架会通过 loadChildren 字符串来动态加载 CrisisModule,然后把 CrisisModule 添加到当前的路由配置中,而惰性加载和重新配置工作只会发生一次,也就是在该路由首次被请求执行

    3.7K30

    【Hybrid开发高级系列】AngularJS(三)——开发实践

    重新创建一个新的项目目录,生成器会在这个目录下生成出你的项目文件的。...Angular模块是一些带有特定功能的独立的JS文件。举个例子,ngResource模块(angular-resource.js)提供了RESTful服务。你可以使用空格键来取消项目。...1); 在angularJS中实现返回前一页 http://blog.csdn.net/qianqianyixiao1/article/details/51146519 AngularJs返回前一页面刷新一次前面页面...原因分析:         在controller加载,碰到登录失效,虽然要跳转到登录页,但是当前runloop周期内,还是应该继续执行剩余代码,因为事件绑定逻辑都要执行完,不然页面回退回来,就会发现事件无法响应...angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view不刷新 http://www.oschina.net/question/2356458

    24120

    干货 | 关于前端构建大型知识应用,你知道多少?

    关于 Angular 各个版本的对比,大家可以参考下《谈谈Angular–从Angular1到Angular4》 以及《重新认识Angular》。...2.1路由管理 路由管理其实主要是当我们的项目变大方便管理,同时为了项目体验问题而引入的解决方案。毕竟我们产品设计都比较成熟,对用户来说刷新页面会丢掉页面状态,这样的体验是在是太糟糕了。...我们在规划项目路由的时候,会推动我们对项目业务、功能区块化有更加深入的认识和理解。...Rollup 静态分析代码中的 import,并将排除任何实际使用的代码。这允许我们架构于现有工具和模块之上,而不会增加额外的依赖或使项目的大小膨胀。...结束语 项目的维护永远是程序员的大头,多是前人种树后人乘凉。但是很多时候,大家会为了一的方便,对代码规范比较随意,就导致了我们经常看到有人讨论“继承来的代码”。

    1.1K10

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

    component(组件):此路由导航到(HeroesComponent)将被激活的组件。 在路由和导航页面阅读更多关于定义路由的信息。...当用户通过应用程序导航路由器会在正下方显示每个组件。 刷新浏览器,然后访问localhost:8080 /#/ heroes。 你应该看到英雄列表。...回头看看路由配置,确定“Heroes”是到HeroesComponent的路由的名字。 了解路由章节中的链接参数列表。 刷新浏览器,浏览器显示应用标题和英雄链接,但不是英雄列表。...调用服务来获取Angular ngOnInit()生命周期钩子中的英雄。 在这个仪表板中你指定了四个英雄(第二,第三,第四和第五)。 刷新浏览器以查看新仪表板中的四个英雄名称。...应用程序全局样式 将样式添加到组件,可以将组件需要的所有内容(HTML,CSS和代码)一起放在一个方便的位置。 把它打包起来很容易,在其他地方重新使用组件。

    17.5K30

    学习 Vue 3 全家桶 - vue-router

    # 前端开发模式演变 在 jQuery 时代,对于大部分 Web 项目而言,前端都是不能控制路由的,而是需要依赖后端项目路由系统。...通常,前端项目也会部署在后端项目的模板里,对于每次的页面跳转,都由后端开发人员来负责重新渲染模板。...前端依赖后端,并且前端不需要负责路由的这种开发方式: 优点 开发速度会很快 后端也可以承担部分前端任务等 缺点 前后端项目无法分离 页面跳转由于需要重新刷新整个页面、等待时间较长等等,交互体验下降...之后,JavaScript 获取当前的页面地址,以及当前路由匹配的组件,再去动态渲染当前页面即可。用户在页面上进行点击操作,也不需要刷新页面,而是直接通过 JS 重新计算出匹配的路由渲染即可。...,URL hash 中的 # 就是类似于下面代码中的这种 # : http://cellinlab.xyz/#/login 在进行页面跳转的操作,hash 值的变化并不会导致浏览器页面的刷新,只是会触发

    39010

    Angular CLI 简介

    最下面是devDependencies, 里面都是开发用的工具库, 可以看到angular cli就在里面....最后我想介绍一下这个参数, --routing: 如果想手动为项目配置路由的话, 还是需要一些步骤的, 所以可以使用这个参数直接生成带路由配置的项目....查看浏览器http://localhost:4200: ng serve的优点是, 当代码文件有变化的时候会自动重新构建并且刷新浏览器, 您可以试一下. 另外一种配置CLI的方法 ng set....使用Angular CLI生成路由 第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是...CLI生成路由" : http://www.cnblogs.com/cgzl/p/8611532.html 第四篇文章: “使用Angular CLI进行Build (构建) 和 Serve”: http

    6K110

    最近开发一个较复杂的单页应用的些许感想

    该应用是所谓的前后端分离的: 前端,后端是两个项目。 启动项目,前端只需起一个静态服务器,后端用命令行起即可。 前端负责页面输出。...用了Angular.js,当然啦,路由也用的Angular提供的。后端提供接口。...这是我做的第一次做单页应用,也是第一次在正式项目里用Angular,所以遇到了不少坑,记录如下 页面切换(非页面刷新,只是hash发生变化,ng-view里的内容根据路由进行更新),用jQuery抓取新页面的元素抓不到...页面有较大改动,要改不少jQuery的选择元素的代码 后端的接口调整或出问题后导致的一些问题。 做单页应用的一些总结 尽量不要用jQuery做。用Angular来代替。...因为单页应用的页面跳转并没有刷新页面 前后端分离可采用,前后端均用相同的模板引擎。前端在开发,请求的自己写的模拟的接口,而非后端真正的接口。模拟的接口和后端的接口的格式是一样的。

    42820

    使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端

    我使用的是 angular 5: 由于这个代码是公司的项目, 后端处于早期阶段, 被我开源了, 没什么问题....设置AuthGuard: angular5的authguard就是里面有个方法, 如果返回true就可以访问这个路由, 否则就不可以访问....外层路由代码app-routing.module.ts: import { NgModule } from '@angular/core'; import { Routes } from '@angular...您可以单独建立一个简单的页面就像官方文档那样, 然后再跳转到angular5项目里面. 这个页面一闪而过: ? 回到angular5项目后就可以正常访问api了....自动刷新Token: oidc-client的自动刷新token是只要配置好了, 你就不用再做什么操作了. 刷新的时候, 它好像是会在页面上弄一个iframe, 然后在iframe里面操作.

    5.6K50

    使用Angular CLI生成 Angular 5项目

    今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个命令会生成一个新的项目叫做my-app并把该项目的文件放在...最下面是devDependencies, 里面都是开发用的工具库, 可以看到angular cli就在里面....接下来看看angular-cli.json这个文件: angular-cli.json: 它是angular cli针对该项目的配置文件.  ?...如果想手动为项目配置路由的话, 还是需要一些步骤的, 所以可以使用这个参数直接生成带路由配置的项目. 看一下项目路由文件: ? 再查看一下app.module: ?...ng serve的优点是, 当代码文件有变化的时候会自动重新构建并且刷新浏览器, 您可以试一下. 另外一种配置CLI的方法 ng set.

    1.9K30

    使用Angular CLI进行单元测试和E2E测试

    执行测试的话就执行ng test即可, 它会执行项目里所有的.spec.ts文件. 而且它还会检测文件的变化, 如果文件有变化, 那么它会重新执行测试. 它应该在单独的终端进程中执行. ...首先创建一个angular项目, 带路由的: ng new sales --routing 创建好项目后, 直接执行命令测试: ng test ? 然后会弹出一个页面, 就是测试的结果数据....module: ng g c person ng g c order ng g m admin --routing ng g c admin/user ng g c admin/email 然后配置一下路由...这时我重新执行一下ng test: ? 尽管程序运行没有问题, 但是测试还是出现了问题: router-outlet is not an angular component....最后点击浏览器的刷新按钮即可: ? E2E测试的参数. 实际上angular cli是配合着protractor来进行这个测试的. 它的命令是 ng e2e.

    2.8K70
    领券