Angular Routing Hash Patterns and HTML5 Patterns

mrcdougal · 发表于 2020-5-28 16:35:03

Two strategies for routing

PathLocationStrategy - Default strategy, supports "HTML 5 pushState" style.
HashLocationStrategy - Supports "hash URL" style. HashLocationStrategy - Supports the "hash URL" style.

Which strategy is better?

You have to choose a strategy and do it early in the project. Once the application is in production, it's not easy to change it because there are already a lot of references to the application URL out there.

Almost all Angular projects use the default HTML 5 style. It generates URLs that are easier for users to understand, and it leaves room for server-side rendering in the future.

Rendering a given page server-side is a technique that can dramatically improve the responsiveness of the app when it first loads. Apps that would otherwise take ten seconds or more to load can be pre-rendered server-side and rendered in their entirety on the user's device in less than a second.

This option only works if the app's URL looks like a standard Web URL with no hash (#) in the middle.

Unless you have a strong reason to use hash routing, you should stick to the default HTML 5 routing style.

angular-cli uses the HTML5 History mode by default.

The url is similar to http://localhost:4200/task-list, which is a more comfortable and aesthetically pleasing URL to look at.

The URL is more comfortable to look at and more aesthetically pleasing. Refreshing the routing page will result in a 404.

There is another mode, hash mode.

The url is similar to http://localhost:4200/#/task-list.

If you jump to the route page and refresh it again, it will still stay in the current route.

How to enable hash route mode

In app.module.ts, introduce and provider

Login to see it.

		Auto Login	Retrieve password
Retrieve Password			Register

[Angular]Angular Routing Hash Patterns and HTML5 Patterns

Related posts

Sections viewed