Angular2+去除url中的#

时间 2019-11-16

标签 angular2 angular 去除 url 栏目 AngularJS 繁體版

原文原文链接

1. 为何要去除？

Angular官方指出：若是没有足够使用hash风格（#）的理由，仍是尽可能使用HTML5模式的路由风格；javascript
若是配置了hash风格，在微信支付或是Angular的深路径依然会出404的问题；php
当你须要使用GA等工具时，因为没法获取#号后的URL，致使每次路由切换都给其发送一个路径；html
'#'有点丑。前端

2. 怎样才能去除？

有四个方法：vue

前端 + ngx
前端 + Apache
前端 + Tomcat
GithubPages / 码云 Pages + 404 页面

2.1 前端

index.html的head里加html5

<base href="/">
复制代码

app.module.tsjava

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

复制代码

app.routes.ts：react

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';

export const ROUTER_CONFIG: Routes = [
  {
   ...
  }
];

复制代码

若是只配置前端会怎么样？

若是只配置前端虽然会去掉'#'可是一刷新页面就404，路径解析上出错了。 Angular是单页应用，它实现了前端路由功能，后台能够再也不控制路由的跳转，将本来属于后端的业务逻辑所有丢给前端。nginx

用户刷新页面时(http://gitee.poetry/life)，请求是先被提交到了WebServer后台，后台路由没有对应页面的路由管理，就会出现404的错误。git
用户若是是先访问首页(http://gitee.poetry)，而后再跳转到页面(http://gitee.poetry/life)，则这个跳转是由Angular前台管理的URL，访问是正常的。

那么咱们让WebServer把属于Angular管理的路由URL，都转发到index.html就能够解决404的问题了，也就是后面介绍的配置信息。

思考：hash模式为何不会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/’都找不到，就会 fall back 到 try_files 的最后一个选项 /index.html发起一个内部 “子请求”，也就是至关于 nginx 发起一个 HTTP 请求到https://deepthan.gitee.io/poetry/index.html。这个请求会被 location ~ .php$ { ... } catch 住，也就是进入 FastCGI 的处理程序。而具体的 URI 及参数是在 REQUEST_URI 中传递给 FastCGI 和 WordPress 程序的，所以不受 URI 变化的影响。

2.3 Apache

Apache的根目录新建一个.htaccess文件

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 / 码云 Pages + 404 页面

对于github pages或码云 Pages来讲，咱们没办法直接配置Github pages，但能够在commit时添加一个404页。简单的解决方案以下：
咱们在项目的根目录新建404.html，把index.html中的内容彻底复制到404.html中就能够了。这样作github pages仍然会在恰当的时候给出一个404响应，浏览器将会正确处理该页，并正常加载咱们的应用。

关于这方面的hack： S(GH)PA: The Single-Page App Hack for GitHub Pages

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/">
复制代码

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

we must render the index.html file for any request coming with below pattern
复制代码

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My App</title>
  <base href="/app/">
  <body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="vendor.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>
复制代码

3.3 前端路由优缺点

优势：
1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，而后服务器再响应请求，这个过程确定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来讲会有至关大的提高。
2.在某些场合中，用ajax请求，可让页面无刷新，页面变了但Url没有变化，用户不能获取到想要的url地址，用前端路由作单页面网页就很好的解决了这个问题。
缺点：
使用浏览器的前进，后退键的时候会从新发送请求，没有合理地利用缓存。

若是以为文章不错，不妨点个赞。
首发于github