>  기사  >  웹 프론트엔드  >  Angular2의 URL에서 # 기호를 제거하는 방법에 대한 자세한 설명

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

php中世界最好的语言
php中世界最好的语言원래의
2018-04-14 11:13:501462검색

이번에는 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




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

3.3 前端路由优缺点

优点:

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

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

缺点:

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

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

推荐阅读:



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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.