广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

微信小程序怎么推广_Angular2+怎么去除url中的#号详

日期:2021-01-11 浏览:
Angular2+如何去除url中的#号详解       这篇文章主要给大家介绍了关于Angular 2+时如何去除url中#号的相关资料,文中先对#号去除的原因及方法进行详细的介绍和分析,然后通过示例代码给大家演示去除的方法,需要的朋友可以参考借鉴,下面随着小编来一起看看吧。

前言

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

1. 为什么要去除?

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

2. 怎样才能去除?

有四个方法:

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

2.1  前端
<的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是单页应用,它实现了前端路由功能,后台可以不再控制路由的跳转,将原本属于后端的业务逻辑全部丢给前端。

用户刷新页面时(life),请求是先被提交到了WebServer后台,后台路由没有对应页面的路由管理,就会出现404的错误。 用户如果是先访问首页(/gitee.poetry/life),则这个跳转是由Angular前台管理的URL,访问是正常的。 <就可以解决404的问题了,也就是后面介绍的配置信息。

思考:hash模式为什么不会404?

2.2 ngx配置

带'***'的是需要自己配置 nginx.conf 文件内容

server {
 listen 80; #监听的端口号 
 server_name my_server_name; # 服务器名称 ***
 root /projects/angular/myproject/dist; #相对于nginx的位置 ***
 存在,就结束查找过程,把这个文件附加到请求的request_uri后面,并且发起一个内部的redirect。
 location / { # / 是匹配所有的uri后执行下面操作
 ; #try_files先寻找名为 $uri 文件,没有则寻找 $uri/ 文件,
}

try_files 详细解释:
<发起一个内部 “子请求”,也就是相当于 nginx 发起一个 HTTP 。这个请求会被 location ~ .php$ { ... } catch 住,也就是进入 FastCGI 的处理程序。而具体的 URI 及参数是在 REQUEST_URI 中传递给 FastCGI 和 WordPress 程序的,因此不受 URI 变化的影响。

2.3 Apache

ess文件

RewriteEngine On 
# 如果请求的是现有资源,则按原样执行
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule ^ - [L]
# 
 

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 mit时添加一个404页。简单的解决方案如下:
<中就可以了。这样做github pages仍然会在恰当的时候给出一个404响应,浏览器将会正确处理该页,并正常加载我们的应用。

关于这方面的hack:

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提供的路由策略也是基于上面两个原理实现的,()配置:

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
})
<中的base href属性,Angular将通过这个属性来处理路由跳转
 base href="/app/" rel="external nofollow" rel="external nofollow" 
<页面。
 file for ing with below pattern
<
 !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地址,用前端路由做单页面网页就很好的解决了这个问题。

缺点:

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

总结

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




新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系