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


Posted in Javascript onDecember 20, 2017

前言

本文中主要介绍了关于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地址,用前端路由做单页面网页就很好的解决了这个问题。

缺点:

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

总结

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

Javascript 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
原生JS实现分页
Apr 19 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 #Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 #Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 #Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 #Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 #Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 #Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 #Javascript
You might like
PHP中的串行化变量和序列化对象
2006/09/05 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
php日期操作技巧小结
2016/06/25 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
python中import学习备忘笔记
2017/01/24 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
举例讲解Python常用模块
2019/03/08 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
python如何进行矩阵运算
2020/06/05 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
语文教学感言
2014/02/06 职场文书
励志演讲稿范文
2014/04/29 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
社区工作者演讲稿
2014/05/23 职场文书
校长四风对照检查材料
2014/09/27 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
地陪导游欢迎词
2015/01/26 职场文书
护士实习自荐信
2015/03/06 职场文书
地球上的星星观后感
2015/06/02 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Python获取字典中某个key的value
2022/04/13 Python