首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 6中如何制作不区分大小写的url模式?

在Angular 6中,可以通过配置路由来实现不区分大小写的URL模式。具体步骤如下:

  1. 在路由模块中,定义路由配置。可以使用pathMatch属性设置为'full',以确保完全匹配路由路径。
代码语言:txt
复制
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  // 其他路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. app.module.ts中导入路由模块。
代码语言:txt
复制
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. 在组件中使用routerLink指令来生成链接。在模板中,可以使用[routerLink]属性来指定路由路径。
代码语言:txt
复制
<a [routerLink]="['/home']">Home</a>

这样配置后,无论用户输入的URL是大写、小写或混合大小写,都能正确匹配到对应的路由路径。

对于Angular 6中制作不区分大小写的URL模式,腾讯云没有特定的产品或服务与之相关。但腾讯云提供了云服务器、云数据库、云存储等基础云计算服务,可以帮助开发人员构建和部署应用程序。您可以访问腾讯云官网了解更多相关产品和服务:腾讯云官网

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

路由和URL区别与联系

URL模式 在营销推广过程中,域名网站后面的长短是多人很注意,越短越好,但是Thinkphp域名参数非常长,普通模式就更长了,如何改短呢,ThinkPHP支持URL模式有四种:普通模式、PATHINFO...(首字母大写)规则,而URL模块和控制器都是对应文件,因此Linux环境下面必然存在区分大小写问题。...地址区分大小写,这个也是框架在部署模式下面的默认设置。...当开启调试模式情况下,这个参数是false,因此你会发现在调试模式下面URL区分大小写情况。...news/:cate^add|edit|delete'=>'News/category' 路由规则支持完整匹配定义,例如:'product/:id\d$'=>'Products/Show' 路由规则中静态地址部分区分大小写

3K20

TP入门第四天

1、URL大小写 默认配置:’URL_CASE_INSENSITIVE’  => false,   // URL地址是否区分大小写 这样默认情况下是区分大小写,如果不想让系统区分大小写,请你配置中设置...’URL_CASE_INSENSITIVE’  => true,   // URL地址是否区分大小写 真正你程序命名规范按照tp要求来做就没有大小写问题了 附:Windows 主机区分 URL 大小写...,但是,Unix/Linux 主机区分大小写。...trace信息,配置中添加SHOW_PAGE_TRACE=>true就可以开启了(当然你如果开启调试模式,那么trace会自动开启) 4、日志记录 日志级别: ThinkPHP对系统日志按照级别来分类...,该级别只调试模式开启时有效 配置记录: 记录方式:四种 TP2.1中有这样四种: SYSTEM:日志发送到PHP系统日志记录 MAIL:日志通过邮件方式发送 TCP :日志通过TCP方式发送 FILE

76050

AngularJs ng-route路由详解

,而这个参数只有加载完angular才会出现。...讲解   路由功能是由 routeProvider服务 和 ng-view 搭配实现,ng-view相当于提供了页面模板挂载点,当切换URL进行跳转时,不同页面模板会放在ng-view所在位置;...redirectTo:重定向地址 reloadOnSearch:设置是否只有地址改变时,才加载对应模板;search和params改变都不会加载模板 caseInsensitiveMatch:路径区分大小写...路由有几个常用事件: $routeChangeStart:这个事件会在路由跳转前触发 $routeChangeSuccess:这个事件路由跳转成功后触发 $routeChangeError:这个事件路由跳转失败后触发...使用 页面中,写入URL跳转按钮链接 以及 ng-view标签 <a href

1.9K61

带你走近AngularJS - 基本功能介绍

它提供了一系列兼容性良好并且可扩展服务,包括数据绑定、DOM操作、MVC设计模式和模块加载等。...本文专注于AngularJS 指令使用,我们进入主题之前,我们将快速浏览AngularJS基本用法。 AngularJS 不仅仅是一个类库,而是提供了一个完整框架。...AngularJS 模块 模块可以说是AngularJS 根本。它包含配置、控制、过滤、工厂模式、指令及其它模块。 如果你熟悉.NET平台,但初步学习Angular。...这是一个功能简单指令,在后续章节将展示如何创建一些复杂指令。...它们代表JavaScript 对象,因此名称是区分大小写。指令名称同样也是属性值,它作为HTML标签被解析,所以也是区分大小写

3.1K100

URL操作

一.URL 大小写 系统默认规范是根据 URL 里面的模块名、控制器名来定位到具体控制器类。...比如: http://localhost/demo39/index.php/Home/User/index/id/5 PS: windows 平台,URL大小写会自动忽略,但作为开发人员,保持大小写区分是一个良好习惯...//URL可以区分大小写 'URL_CASE_INSENSITIVE' =>true PS:如果开启了区分大小写,那么对于 UserTypeController.class.php 这样控制器就需要如下访问方式...但实际用途中,大量超链接是模版中设置,而在控制器把 U()当变量传递过去,有点过于繁杂。所以,我们可以模版使用使用 U()方法。...//模版中使用U()方法 {:U('User/add', array('id'=>5))} 三.URL 生成 为了配合所使用URL模式, 我们需要能够动态根据当前URL设置生成对应URL 地址

87960

Angular和Vue.js 深度对比

如今,已有许多开发人员开始使用 Vue.js 来取代 Angular 和 React.js  。 那么对于 Angular 和 React.js ,开发者该如何选择呢?...Model-View-ViewModel(MVVM) 为了构建客户端Web应用程序,Angular 将原始 MVC 软件设计模式背后基本原理结合在一起。...然而,Angular 没有实现传统意义上 MVC,而是实现了  MVVM 即 Model-View-ViewModel 模式。 2....Deep Linking 目的是为了查看位置 URL 并安排它映射到页面的当前状态。 Deep Linking 功能通过查看页面状态并将用户带到特定内容,而不是从主页中遍历应用程序来设置 URL。...对于希望处理客户端和服务器端模式开发人员来说,Angular 是一个不错选择。

5.4K30

Nginx 进阶 (ssl、fpm、rewrite、cache配置等)

同一个location中存在多个rewrite规则会自上而下逐个被检查,可以使用flag控制此循环功能 [flag]:重写完成后停止对当前url在当前location中后续其他重写操作,改为新...url进行新一轮处理。...这个状态值有两个阶段,第一阶段是一个正常返回值200,第二阶段是一个临时重定向。如果用permanet,返回值就是301,重写后生成一个新url返回给客户端,有客户端对新url进行请求。...= ~:模式匹配,区分字符大小写 ~*:模式匹配,区分字符大小写 !~:模式匹配,区分大小写 !~*:模式匹配,区分大小写 文件及目录存在性判断:-f,!-f(文件),-e,!...;指定压缩比:1-9 gzip,disable regex ……;regex是匹配客户端浏览器类型模式,表示对所有匹配浏览器执行压缩响应。

1K80

Nginx ngx_http_rewrite_module模块详解(四)

,而后对新URI启动新一轮重写检查;提前重启新一轮循环,建议lation中使用 break:重写完成后停止对当前URI在当前location中后续其它重写操作,而后直接跳转至重写规则配置块之后其它配置...;结束循环,建议location中使用 redirect:临时重定向,重写完成后以临时重定向方式直接返回重写后生成新URI给客户端,由客户端重新发起请求;不能以http://或https...return code [text]; return code URL; return URL; 停止处理,并返回给客户端指定响应码 可用位置:server...= #不同 ~ #模式匹配,区分字符大小写 ~* #模式匹配,区分字符大小写 !...~ #模式匹配,区分字符大小写 !~* #模式匹配,区分字符大小写 文件及目录存在性判断: -e, !

72210

AngularJS入门心得3——HTML左右手指令

《AngularJS入门心得1——directive和controller如何通信》我们提到“AngularJS是为了克服HTML构建应用上不足而设计。...那么AngularJS如何弥补HTML缺陷,指令可能是最好回答。 指令是什么???...1.指令规范化   HTML命名规范中,因为区分大小写,所以类似myCustomer和mycustomer是一样,那么如何在HTML定义指令呢,常见可以通过   (1)     加前缀:”x-...“和”data-”   (2)     指令名之间添加间隔符:”:”,”-”,”_”         那么如何将HTML中指令名转化为js中变量,相应,有两种方式:   (1)     从元素或属性名字前面去掉...最近一直熟悉业务,一直也没有跟进AngularJS,倒是重新认识Javascript,只能说之前对于js理解实在太浅,后面有时间会继续跟进javascript。

3.2K50

AngularDart 4.0 高级-路由概述 顶

点击页面上链接,浏览器导航到新页面。 点击浏览器后退和前进按钮,浏览器会前后浏览您浏览过网页历史记录。 Angular路由器借鉴了这种模式。...路由器插座 当此应用浏览器URL成为/#/heroes时,路由器将该URL与名为HeroesRouteDefinition匹配,并在放置宿主视图HTML中RouterOutlet后显示HeroesComponent...-- Routed views go here --> 路由链接 现在,您已经配置了路由并提供了一个渲染它们地方,但您如何导航? 该URL可以直接从浏览器地址栏中获得。...路由将每个链接参数列表解析为完整URL。 RouterLink指令还有助于视觉上区分当前所选活动路线锚点。...RouteDefinition 定义路由如何根据URL模式导航到组件。 Route 一种RouteDefinition。 定义路由器如何根据URL模式导航到组件。

6.1K20

2020vue面试题及答案_人际关系面试题及答案

会给用户好像跳转了网页一样感觉, 但是实际上没有跳转 主要用在单页面应用(SPA) history 模式 工作原理: 主要利用 history.pushState() API 来改变URL, 而刷新页面...其实一共有五种模式可以实现改变URL, 而刷新页面....需要后台配置支持, 如果输入一个并不存在url, 需要后端配置做 “兜底配置”, 不是粗暴返回404, 而是返回首页 23、Vue与Angular以及React区别?...对原生应用支持不同: React Native为iOS和Android开发原生应用;AngularNativeScript已被原生应用所采用,特别是Ionic框架已经被广泛地运用在制作混合应用等方面...框架和库:Angular 是一个框架而不是一个库,因为它提供了关于如何构建应用程序强有力约束,并且还提供了更多开箱即用功能。React 和 Vue 是是一种库,可以和各种包搭配。 8.

8.7K20

使用Nginx过滤网络爬虫

现在网络爬虫越来越多,有很多爬虫都是初学者写,和搜索引擎爬虫不一样,他们不懂如何控制速度,结果往往大量消耗服务器资源,导致带宽白白浪费了。...其实Nginx可以非常容易地根据User-Agent过滤请求,我们只需要在需要URL入口位置通过一个简单正则表达式就可以过滤不符合要求爬虫请求: ......变量$http_user_agent是一个可以直接在location中引用Nginx变量。~*表示区分大小写正则匹配,通过python就可以过滤掉80%Python爬虫。...---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比无穷隧道特效 一个治愈JavaScript疲劳学习计划 全栈工程师技能大全

1K10

Nginx 之 Location基础理解及实战

nginx不对url做编码,因此请求为/static/20%/aa,可以被规则^~ /static/ /aa匹配到(注意是空格)。...~ 开头表示区分大小写正则匹配 ~*  开头表示区分大小写正则匹配 !~和!~*分别为区分大小写匹配及区分大小写匹配 正则 . / 通用匹配,任何请求都会匹配到。...规则E不起作用, 而 http://localhost/static/c.png 则优先匹配到 规则C 访问 http://localhost/a.PNG 则匹配规则E, 而不会匹配规则D,因为规则E区分大小写...访问 http://localhost/a.xhtml 不会匹配规则F和规则G,http://localhost/a.XHTML不会匹配规则G,因为区分大小写。...# 有两种配置模式,目录匹配或后缀匹配,任选其一或搭配使用 location ^~ /static/ { # 请求/static/a.txt 将被映射到实际目录文件: /webroot/res/static

21610

Windows 区分大小写

背景 之前就看过说 Windows 区分大小写,但平时用得少倒也没什么体验,没想到还真能踩一次坑。 上周有同事找我帮忙看个问题,说是配置修改后生效。...这个 Linux 上没什么问题,但映射到 Windows 上之后就混乱了,明明用烧录工具去选中了 xxxa 下新文件,但工具真正读取到却是 xxxA 下旧文件,自然修改就不能生效了。 ?...其他 据说 Windows 是为了兼容 Dos,才没有区分大小写,后续就一直区分了。 Linux 则是一直区分大小写。Mac 则可以制作分区时选择此分区是否要区分大小写。...Win10 引入了 WSL,如上所述 Linux 是需要区分大小写,为此微软给 NTFS 文件系统加了个 SetCaseSensitiveInfo 标志,可以支持文件夹级别启用或禁用。...启用之后,Windows 程序也可以对这个文件夹下文件区分大小写了。

2.6K10

Nginx结构全解析(39)

1 匹配模式优先级 location = /uri    =开头表示精确匹配,只有完全匹配上才能生效。 location ^~ /uri   ^~ 开头对URL路径进行前缀匹配,并且正则之前。...无正则普通匹配(^ 表示“非”,~ 表示“正则”,字符意思是:不要继续匹配正则) location ~ pattern  ~开头表示区分大小写正则匹配。!...~为区分大小写匹配正则 location ~* pattern  ~*开头表示区分大小写正则匹配。!...~*为区分大小写匹配正则 location /uri     不带任何修饰符,也表示前缀匹配,但是正则匹配之后。...如果上一步得到最长location为^~类型,则表示阻断正则表达式,不再匹配正则表达式 如果上一步得到最长location不是^~类型,继续匹配正则表达式,只要有一个正则成功,则使用这个正则location

30420

vim 从嫌弃到依赖(18)——查找模式进阶

上一篇文章中,我们初步结识了如何使用查找模式,也能够通过n和 N进行查找。这篇将会介绍搜索中更高级用法。...可以匹配时输入\c来区分大小写而使用 \C区分大小写,这个符号可以出现在任何位置,哪怕你输入 /requ\Cire它也能正确找到所有的 require字符串。...如果我们只是想匹配是否有多个重复 Python可以这样写: ()\_s+\1 界定匹配范围 搜索模式中,vim把查找域中输入内容(可以是正则表达或者是原意匹配字符串)和它匹配高亮文本进行了区分...转义特殊字符 这里我们用一个URL 作为例子来演示 https://www.baidu.com/search?q=\\/ 假设我们要匹配所有文档中出现这个url,该如何做呢?...q=\\\\\/ 本篇中主要讲述了如何在vim中使用正则表达式,到此应该已经聊完了vim中查找模式基本操作了。后面我们将介绍该如何进行替换操作。

1.2K20
领券