Angular2+如何去除url中的#号详解

前言

本文中主要介绍了关于Angular2+中去除url中#号的相关内容,这是最近在工作中遇到的一个问题,觉着有必要给大家分享下,下面话不多说了,来一起看看详细的介绍吧。

1. 为什么要去除?

  • Angular官方指出:如果没有足够使用hash风格(#)的理由,还是尽量使用HTML5模式的路由风格;
  • 如果配置了hash风格,在微信支付或是Angular的深路径依然会出404的问题;
  • 当你需要使用GA等工具时,由于无法获取#号后的URL,导致每次路由切换都给其发送一个路径;
  • '#'有点丑。

2. 怎样才能去除?

有四个方法:

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

2.1  前端

index.html的head里加

<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的问题了,也就是后面介绍的配置信息。

思考: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/" rel="external nofollow" rel="external nofollow" >

在后端的服务器上,用下面的正则去匹配所有的页面请求导向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/" rel="external nofollow" rel="external nofollow" >
 <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地址,用前端路由做单页面网页就很好的解决了这个问题。

缺点:

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • Angular.JS去掉访问路径URL中的#号详解

    本文目录 URL的#号问题 找到错误原因 静态网站的解决方案 动态网站的解决方案 一. URL的#号问题 使用AngularJS的朋友都应该了解,AngularJS框架定义了自己的前端路由控制器,通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新,并支持HTML5的历史记录功能,详细介绍可以参考文章:AngularJS路由和模板. 对于默认的情况,是不启动HTML5模式的,URL中会包括一个#号,用来区别是AngularJS管理的路径还是WebServer管理的路径. 比如

  • 移除AngularJS下URL中的#字符的方法

    AngularJS 默认将会使用一个 # 号来对URL进行路由. 例如: http://example.com/ http://example.com/#/about http://example.com/#/contact 要获得干净的URL并将井号从URL中移除是很容易的. 完成两件事情就行了. 配置 $locationProvider 设置我们的相对连接的起点路径 $location 服务 在Angular中, $location服务会解析地址栏中的URL,并对你的应用程序作出改变,反之亦

  • Angular2+如何去除url中的#号详解

    前言 本文中主要介绍了关于Angular2+中去除url中#号的相关内容,这是最近在工作中遇到的一个问题,觉着有必要给大家分享下,下面话不多说了,来一起看看详细的介绍吧. 1. 为什么要去除? Angular官方指出:如果没有足够使用hash风格(#)的理由,还是尽量使用HTML5模式的路由风格: 如果配置了hash风格,在微信支付或是Angular的深路径依然会出404的问题: 当你需要使用GA等工具时,由于无法获取#号后的URL,导致每次路由切换都给其发送一个路径: '#'有点丑. 2. 怎

  • Python Django获取URL中的数据详解

    目录 Django获取URL中的数据 URL路径参数 使用path函数 使用re_path函数 URL关键字形式 总结 Django获取URL中的数据 URL中的参数一般有两种形式.如下所示: 1. https://zy010101.blog.csdn.net/article/details/120816954 2. https://so.csdn.net/so/search?q=Django&t=blog&u=zy010101 我们将第一种形式称为"URL路径参数":

  • URL中井号的作用介绍

    URL中的井号(#)是比较常见的,它并不影响网址的指向,而是有众多功能和特点的.下面就为大家介绍一些有关井号的故事. 1.页面中的某一个位置可以用井号在URL中指定 井号作为比较长出现在URL的一种符号,通常也会代表这个页面中的某一个位置,比如:http://aoshu.juren.com/chzt/xiaoxueshijuan/index.html#nn1,此URL表示在这个页面中nn1的位置.浏览器读取这个URL后,会自动将nn1位置滚动至可视区域. 设置描点只需在相应位置添加,然后在按钮的

  • URL中“#” “?” &“”号的作用浅析

    1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变成了http://twitter.com/#!/username 这是主流网站第一次将"#"大规模用于重要URL中.这表明井号(Hash)的作用正在被重新认识.本文根据HttpWatch的文章,整理与井号有关的所有重要知识点. 一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置

  • python爬虫中的url下载器用法详解

    前期的入库筛选工作已经由url管理器完成了,整理的工作自然要由url下载器接手.当我们需要爬取的数据已经去重后,下载器的主要任务的是这些数据下载下来.所以它的使用也并不复杂,不过需要借助到我们之前所学过的一个库进行操作,相信之前的基础大家都学的很牢固.下面小编就来为大家介绍url下载器及其使用的方法. 下载器的作用就是接受URL管理器传递给它的一个url,然后把该网页的内容下载下来.python自带有urllib和urllib2等库(这两个库在python3中合并为urllib),它们的作用就是

  • 微信小程序url与token设置详解

    微信小程序url与token设置详解 新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 define("TOKEN","myToken");// 后台填写的token,在微信公众平台启用 $wechatObj = new wechatAPI(); $wechatObj->isValid(); class wechatAPI { public function isValid()//验证微信接口,验证函数以外的代码和微信公众号开发token

  • 优化MyBatis配置文件中的配置详解

    本文研究的主要是优化MyBatis配置文件中的配置的相关内容,具体介绍如下. 一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置信息写在了MyBatis的conf.xml文件中,如下: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN&

  • nginx中斜杠(/)详解

    不知大家日常在nginx配置时,是不是会对是否加斜杠充满疑惑? 配置location.proxy_pass时,加“/”与不加“/”的区别,今天我们通过实操去验证下. 通过nginx代理访问地址:http://127.0.0.1/v1/pt/apply/page location.proxy_pass都不加斜杠 location /v1 {     proxy_pass http://127.0.0.1:8899; } 实际访问代理地址:http://127.0.0.1:8899/v1/pt/ap

  • linux 中ls命令详解

    ls命令用来显示目标列表,在Linux中是使用率较高的命令.ls命令的输出信息可以进行彩色加亮显示,以分区不同类型的文件. 语法 ls(选项)(参数) 选项 -a:显示所有档案及目录(ls内定将档案名或目录名称为“.”的视为影藏,不会列出): -A:显示除影藏文件“.”和“..”以外的所有文件列表: -C:多列显示输出结果.这是默认选项: -l:与“-C”选项功能相反,所有输出信息用单列格式输出,不输出为多列: -F:在每个输出项后追加文件的类型标识符,具体含义:“*”表示具有可执行权限的普通文

随机推荐