Angular+RouterLink makes different fancy jumps

This time I will bring you Angular RouterLink to make different fancy jumps. What are the precautions for Angular RouterLink to make fancy jumps? The following is a practical case, let's take a look.

Preface

In addition to using Router's navigate() method to switch routes, Angular2 also provides a command to convert a

DOM Object is enhanced as a routing entry:

@View({
directives:[RouterOutlet,RouterLink]
template : `<nav>
<b router-link="video">video</b> | 
<b router-link="music">music</b>
</nav>
<router-outlet></router-outlet>`
})

RouterLink instruction adds click

event monitoring to the host DOM object, and calls Router's navigate() method for routing when triggered.

However, this article mainly introduces the relevant content about Angular’s ​​RouterLink fancy jump. It is shared for everyone’s reference and study. I won’t say much below, let’s take a look at the detailed introduction.

routerLink itself supports two writing methods:

<a routerLink="detail">
</a>
<a [routerLink]="[&#39;detail&#39;]">
</a>

What are the writing methods for the value of routerLink, and what are the differences?

Assume that the current route is

`http://localhost:4200/#/doc/license`

Writing method 1: Absolute path / route name

 <!--跳到 http://localhost:4200/#/doc/license -->
 <a [routerLink]="[&#39;/doc/demo&#39;]" >跳呀跳</a>
 
 <!--跳到 http://localhost:4200/#/demo -->
 <a [routerLink]="[&#39;/demo&#39;]" >跳呀跳</a>

Then the url is

http:/ Jump to /localhost:4200/#/doc/demo, that is, http://localhost:4200/#/ the absolute path you want to jump to.

Writing 2: A routing name routing name

 <a [routerLink]="[&#39;demo&#39;]" >跳呀跳</a>

Then the url is http://localhost:4200/#/doc/license/(demo), that is, http ://localhost:4200/#/doc/license is the absolute path you want to jump to. At this time, it will add something to your route to become /(demo), and the jump will not work.

Writing method 3: relative path../route name

 <a [routerLink]="[&#39;../demo&#39;]" >跳呀跳</a>

Then the url is

http://localhost:4200/#/doc/ demo, that is, http://localhost:4200/#/doc is the relative path you want to jump to. It will start looking at the previous level.

Writing method 4: ./route name, that is, the current route you wrote to jump to the route

 <a [routerLink]="[&#39;./demo&#39;]" >跳呀跳</a>

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to implement snowflake falling animation in JS

How to implement the port reuse function in Node.Js

The above is the detailed content of Angular+RouterLink makes different fancy jumps. For more information, please follow other related articles on the PHP Chinese website!