Angular2의 URL에서 # 기호를 제거하는 방법에 대한 자세한 설명

이번에는 Angular2에서 URL에서 #번호를 제거하는 작업에 대해 자세히 설명하겠습니다. Angular2에서 URL에서 #번호를 제거할 때의 주의사항은 무엇입니까? 바라보다.

머리말

이 글은 주로 Angular2+의 URL에서 # 기호를 제거하는 것에 대한 내용을 소개합니다. 이것은 제가 최근 직장에서 겪었던 문제입니다. 아래에서는 따로 언급하지 않겠습니다. 세부적으로 살펴보자.

1. 왜 제거해야 하나요?

• Angular 공식 지적: 해시 스타일(#)을 사용할 이유가 충분하지 않은 경우 HTML5 모드 라우팅 스타일을 사용해 보세요.

• 해시 스타일을 구성하면 WeChat 결제 또는 Angular 딥에서 404 문제가 계속 발생합니다.

• GA 등의 도구를 사용해야 하는 경우 # 기호 뒤의 URL을 얻을 수 없으므로 경로가 전환될 때마다 경로가 전송됩니다. 못생긴.

2. 어떻게 제거하나요?

네 가지 방법이 있습니다:

프런트엔드 + ngx

• 프런트엔드 + Apache

• 프런트엔드 + Tomcat

• GithubPages / Code Cloud Pages + 404 페이지

• 2.1 프론트엔드

index.html의 헤드가 추가되었습니다

<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는 프런트엔드

라우팅 기능

을 구현하는 단일 페이지 애플리케이션입니다. 백엔드는 더 이상 라우팅 점프를 제어할 수 없으며 원래 백엔드에 속한 모든 비즈니스 로직을 프런트엔드에 던질 수 없습니다.

사용자가 페이지(http://gitee.poetry/life)를 새로 고치면 요청이 먼저 WebServer 백그라운드에 제출됩니다. 백그라운드 경로에 해당 페이지에 대한 라우팅 관리가 없으면 404 오류가 발생합니다.

• 사용자가 처음 홈페이지(http://gitee.poetry)를 방문한 후 해당 페이지(http://gitee.poetry/life)로 점프하면 이 점프는 Angular 프론트 데스크에서 관리하는 URL입니다. 정상입니다.

• 그러면 WebServer에게 Angular에서 관리하는 모든 라우팅 URL을 나중에 소개할 구성 정보인 index.html로 전달하도록 요청하여 404 문제를 해결할 수 있습니다.

생각: 해시 모드가 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/poetry/life라면, $uri는 '/life'입니다. '$uri'도 $uri/'도 발견되지 않으면 try_files의 마지막 옵션으로 돌아갑니다. /index.html은 내부 "하위 요청"을 시작합니다. 이는 nginx가 HTTP를 시작하는 것과 동일합니다. https://deepthan.gitee.io/poetry/index.html로 요청하세요. 이 요청은 ~ .php$ { 위치로 전송됩니다. ... } catch, 즉 FastCGI 처리기를 입력합니다. 특정 URI 및 매개변수가 REQUEST_URI에 전달됩니다. FastCGI 및 WordPress 프로그램은 URI 변경의 영향을 받지 않습니다.

2.3 아파치

Apache

RewriteEngine On 
# 如果请求的是现有资源，则按原样执行
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule ^ - [L]
# 如果请求的资源不存在，则使用index.html
RewriteRule ^ /index.html

의 루트 디렉터리에 새 .htaccess 파일을 만듭니다.

2.4 Tomcat 구성

Tomcat/conf/web.xml文件上添加
<error-page>
 <error-code>404</error-code>
 <location>/</location>
</error-page>

2.5 GithubPages / 코드 클라우드 페이지 + 404페이지

Github 페이지나 코드 클라우드 페이지의 경우 Github 페이지를 직접 구성할 수 없지만 커밋 시 404 페이지를 추가할 수 있습니다. 간단한 해결책은 다음과 같습니다: 프로젝트의 루트 디렉토리에 새로운 404.html을 생성하고 index.html의 내용을 404.html에 완전히 복사합니다. 이 작업을 수행하면 github 페이지는 적절한 시간에 여전히 404 응답을 제공하고 브라우저는 페이지를 올바르게 처리하고 애플리케이션을 정상적으로 로드합니다.

이 해킹 정보: S(GH)PA: GitHub 페이지용 단일 페이지 앱 해킹

3. '#'이 있는 것과 없는 것의 원칙적인 차이점은 무엇인가요?

3.1  这个得先说下什么是前端路由：

以前路由都是后台做的，通过用户请求的url导航到具体的html页面，现在我们在前端可以利用 Angular、vue、react等通过配置文件，达到前端控制路由跳转的功能。

前端路由的实现方法：

• 通过hash实现 当url的hash发生改变时，触发hashchange注册的回调（低版本没有hashchange事件，通过轮回检测url实现），回调中去进行不同的操作，进行不同的内容展示。
  使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash，我们常说的锚点严格来说应该是页面中的a[name]等元素。

• HTML5的history api操作浏览器的session history实现
  基于history实现的路由中不带#，就是原始的路由

3.2 Angular中的路由策略

angular2提供的路由策略也是基于上面两个原理实现的，可以在@NgModule中通过providers配置或RouterModule.forRoot()配置：

1） 路由中有#

@NgModule({
 imports:[RouterModule.forRoot(routes,{useHash:true})]
})

或

@NgModule({
 imports:[RouterModule.forRoot(routes)],
 providers:[
  {provide: LocationStrategy, useClass: HashLocationStrategy} 
 ]
})

HashLocationStragegy

适用于基于锚点标记的路径，比如/#/**，后端只需要配置一个根路由即可。

2） html5路由（无#）

改用 PathLocationStrategy（angular2的默认策略，也就是HTML5路由），使用这个路由的常规路径不带#，这种策略需要后台配置支持，因为我们的应用是单页面应用，如果后台没有正确的配置，当用户在浏览器从一个路由跳往另外一个路由或者刷新时就会返回404，需要在服务端里面覆盖所有的路由情况（后端可以通过nginx或者apache等配置）。

@NgModule({
 imports:[RouterModule.forRoot(routes)],
 providers:[
 {provide: LocationStrategy, useClass: PathLocationStrategy} 
 // 这一行是可选的，因为默认的LocationStrategy是PathLocationStrategy
 ]
})

更改index.html中的base href属性，Angular将通过这个属性来处理路由跳转

<base href="/app/" rel="external nofollow" rel="external nofollow" >

在后端的服务器上，用下面的正则去匹配所有的页面请求导向index.html页面。

we must render the index.html file for any request coming with below pattern

index.html

 
 
 <base href="/app/" rel="external nofollow" rel="external nofollow" >
 
 Loading...
 
 
 

3.3 前端路由优缺点

优点：

1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户不能获取到想要的url地址，用前端路由做单页面网页就很好的解决了这个问题。

缺点：

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

위 내용은 Angular2의 URL에서 # 기호를 제거하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!