찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Angular2의 URL에서 # 기호를 제거하는 방법(자세한 튜토리얼)

Angular2의 URL에서 # 기호를 제거하는 방법(자세한 튜토리얼)

亚连
亚连원래의
2018-06-19 15:52:471597검색

이 글에서는 Angular 2+에서 URL의 # 기호를 제거하는 방법에 대한 관련 정보를 주로 소개합니다. 먼저 # 기호를 제거하는 이유와 방법을 자세히 소개하고 분석한 후 샘플을 통해 제거하는 방법을 보여줍니다. code.method, 필요하신 분들은 참고하시면 됩니다

머리말

본 글은 주로 Angular2+에서 URL의 #번호 제거에 대한 내용을 소개하고 있는데, 최근 직장에서 겪은 문제입니다. 필요하다고 생각해서 더 이상 말하지 않겠습니다. 자세한 소개를 살펴보겠습니다.

1. 왜 제거해야 하나요?

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

  • 해시 스타일이 구성된 경우 WeChat 결제 또는 Angular를 사용하세요. ​​Deep Path 404 문제는 계속 발생합니다.

  • GA와 같은 도구를 사용해야 하는 경우 # 번호 이후의 URL을 얻을 수 없기 때문에 경로를 전환할 때마다 경로가 전송됩니다.

    • '#'이 좀 못생겼네요 .

2. 어떻게 제거하나요? 네 가지 방법이 있습니다:

    Front-end + ngx

    • Front-end + Apache

    • Front-end + Tomcat

    • GithubPages / Code Cloud Pages + 404 페이지

2.1 Frontend

index.html head Riga 

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

app.module.ts

import { ROUTER_CONFIG } from &#39;./app.routes.ts&#39;;
@NgModule({
 imports: [
 ...
 RouterModule.forRoot(ROUTER_CONFIG) 
 // RouterModule.forRoot(ROUTER_CONFIG, { useHash: true } ) 这样写是带#的
 ], 
})

app.routes.ts: 

import { NgModule } from &#39;@angular/core&#39;;
import { Routes } from &#39;@angular/router&#39;;
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/인 경우 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 Apache

Apache

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

2.4 Tomcat 구성

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

2.5 GithubPages/Code Cloud Pages + 404 페이지

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를 사용할 수 있습니다. 구성 파일을 통해 프런트엔드 제어 경로 점프 기능을 구현할 수 있습니다.

프런트 엔드 라우팅 구현 방법:

    해싱을 통해 구현됨. URL의 해시가 변경되면 hashchange로 등록된 콜백이 트리거됨(하위 버전은 해시 변경 이벤트가 없으며 환생 감지를 통해 구현됨) URL의) 콜백에서 다른 작업이 수행됩니다.
  • 해시를 사용하여 구현하는 경우 경로에서 # 뒤의 내용이 해시입니다. 엄밀히 말하면 우리가 자주 언급하는 앵커 포인트는 a[name] 및 기타 요소여야 합니다. 페이지.


    • HTML5의 기록 API는 브라우저의 세션 기록 구현을 작동합니다
  • # 없이 기록을 기반으로 구현된 경로가 원래 경로입니다


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地址，用前端路由做单页面网页就很好的解决了这个问题。

缺点：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用JavaScript如何实现抽奖系统

详细解答vue的变化对组件有什么影响？

使用Parcel如何打包

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

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Vue.js에서 모바일 컴포넌트 라이브러리를 사용하는 방법(자세한 튜토리얼)다음 기사：Vue.js에서 모바일 컴포넌트 라이브러리를 사용하는 방법(자세한 튜토리얼)

관련 기사

더보기