이 글에서는 Angular 2+에서 URL의 # 기호를 제거하는 방법에 대한 관련 정보를 주로 소개합니다. 먼저 # 기호를 제거하는 이유와 방법을 자세히 소개하고 분석한 후 샘플을 통해 제거하는 방법을 보여줍니다. code.method, 필요하신 분들은 참고하시면 됩니다
머리말
본 글은 주로 Angular2+에서 URL의 #번호 제거에 대한 내용을 소개하고 있는데, 최근 직장에서 겪은 문제입니다. 필요하다고 생각해서 더 이상 말하지 않겠습니다. 자세한 소개를 살펴보겠습니다.
1. 왜 제거해야 하나요?
Angular가 공식적으로 지적한 내용: 해시 스타일(#)을 사용할 이유가 충분하지 않은 경우 HTML5 모드의 라우팅 스타일을 사용해 보세요.
해시 스타일이 구성된 경우 WeChat 결제 또는 Angular를 사용하세요. Deep Path 404 문제는 계속 발생합니다.
GA와 같은 도구를 사용해야 하는 경우 # 번호 이후의 URL을 얻을 수 없기 때문에 경로를 전환할 때마다 경로가 전송됩니다.
2. 어떻게 제거하나요? 네 가지 방법이 있습니다:
index.html head Riga
<base href="/" rel="external nofollow" >
app.module.ts
import { ROUTER_CONFIG } from './app.routes.ts'; @NgModule({ imports: [ ... RouterModule.forRoot(ROUTER_CONFIG) // RouterModule.forRoot(ROUTER_CONFIG, { useHash: true } ) 这样写是带#的 ], })
app.routes.ts:
import { NgModule } from '@angular/core'; import { Routes } from '@angular/router'; export const ROUTER_CONFIG: Routes = [ { ... } ];
프런트엔드만 구성하면 어떻게 되나요?
프런트엔드만 구성하면 '#'이 없어지는데, 페이지 새로고침하자마자 404가 나오며, 경로분석에 오류가 있습니다.
Angular는 프런트엔드 라우팅 기능을 구현하는 단일 페이지 애플리케이션입니다. 백엔드는 더 이상 라우팅 점프를 제어할 수 없으며 원래 백엔드에 속한 모든 비즈니스 로직을 프런트엔드에 전달합니다.생각하기: 해시 모드가 404가 아닌 이유는 무엇입니까?
2.2 ngx 구성'***'을 사용하면 nginx.conf 파일 내용을 직접 구성해야 합니다.
server { listen 80; #监听的端口号 server_name my_server_name; # 服务器名称 *** root /projects/angular/myproject/dist; #相对于nginx的位置 *** index index.html; #如果index.html存在,就结束查找过程,把这个文件附加到请求的request_uri后面,并且发起一个内部的redirect。 location / { # / 是匹配所有的uri后执行下面操作 try_files $uri $uri/ /index.html; #try_files先寻找名为 $uri 文件,没有则寻找 $uri/ 文件,再没有就寻找/index.html } }
try_files 자세한 설명:
요청이 https://deepthan.gitee.io/인 경우 poem/ life, $uri는 '/life'입니다. '$uri''$uri/'를 찾을 수 없으면 try_files/index.html의 마지막 옵션으로 돌아가 내부 "하위 요청"을 시작합니다. 즉, nginx가 https://deepthan.gitee.io/poetry/index.html에 대한 HTTP 요청을 시작하는 것과 같습니다. 이 요청은 ~ .php$ { ... } catch 위치에 의해 포착됩니다. 즉, FastCGI 핸들러로 들어갑니다. 특정 URI 및 매개변수는 REQUEST_URI의 FastCGI 및 WordPress 프로그램에 전달되므로 URI 변경의 영향을 받지 않습니다.
2.3 ApacheApache
RewriteEngine On # 如果请求的是现有资源,则按原样执行 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # 如果请求的资源不存在,则使用index.html RewriteRule ^ /index.html
Tomcat/conf/web.xml文件上添加
<error-page>
<error-code>404</error-code>
<location>/</location>
</error-page>
github 페이지 또는 코드 클라우드의 경우 P for age에서는 Github 페이지를 직접 구성할 수 없지만 커밋할 때 404 페이지를 추가할 수 있습니다. 간단한 해결책은 다음과 같습니다.
프로젝트의 루트 디렉토리에 새로운 404.html을 생성하고 index.html의 내용을 404.html에 완전히 복사합니다. 이 작업을 수행하면 github 페이지는 적절한 시간에 404 응답을 제공하고 브라우저는 페이지를 올바르게 처리하고 애플리케이션을 정상적으로 로드합니다.
해킹 정보: S(GH)PA: GitHub 페이지용 단일 페이지 앱 해킹
3. '#'을 사용하는 것과 '#'을 사용하지 않는 것의 원칙적인 차이점은 무엇인가요?
3.1 먼저 프론트엔드 라우팅이 무엇인지 이야기해보자:과거에는 라우팅이 백그라운드에서 이루어졌고, 사용자가 요청한 URL을 통해 특정 html 페이지로 이동했다. 이제 프런트엔드에서 Angular, vue 및 React를 사용할 수 있습니다. 구성 파일을 통해 프런트엔드 제어 경로 점프 기능을 구현할 수 있습니다.
프런트 엔드 라우팅 구현 방법:
angular2提供的路由策略也是基于上面两个原理实现的,可以在@NgModule中通过providers配置或RouterModule.forRoot()配置: 1) 路由中有# 或 HashLocationStragegy 适用于基于锚点标记的路径,比如/#/**,后端只需要配置一个根路由即可。 2) html5路由(无#) 改用 PathLocationStrategy(angular2的默认策略,也就是HTML5路由),使用这个路由的常规路径不带#,这种策略需要后台配置支持,因为我们的应用是单页面应用,如果后台没有正确的配置,当用户在浏览器从一个路由跳往另外一个路由或者刷新时就会返回404,需要在服务端里面覆盖所有的路由情况(后端可以通过nginx或者apache等配置)。 更改index.html中的base href属性,Angular将通过这个属性来处理路由跳转 在后端的服务器上,用下面的正则去匹配所有的页面请求导向index.html页面。 index.html 3.3 前端路由优缺点 优点: 1.从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。 2.在某些场合中,用ajax请求,可以让页面无刷新,页面变了但Url没有变化,用户不能获取到想要的url地址,用前端路由做单页面网页就很好的解决了这个问题。 缺点: 使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存。 上面是我整理给大家的,希望今后会对大家有帮助。 相关文章: 위 내용은 Angular2의 URL에서 # 기호를 제거하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!@NgModule({
imports:[RouterModule.forRoot(routes,{useHash:true})]
})
@NgModule({
imports:[RouterModule.forRoot(routes)],
providers:[
{provide: LocationStrategy, useClass: HashLocationStrategy}
]
})
@NgModule({
imports:[RouterModule.forRoot(routes)],
providers:[
{provide: LocationStrategy, useClass: PathLocationStrategy}
// 这一行是可选的,因为默认的LocationStrategy是PathLocationStrategy
]
})
<base href="/app/" rel="external nofollow" rel="external nofollow" >
we must render the index.html file for any request coming with below pattern