Summary of angular+routerlink jump methods

This time I will bring you a summary of the angular routerlink jump method. What are the precautions in the angular routerlink jump method summary? 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 Enhance a DOM object into 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 when triggered. routing.

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 write to jump to the route

 <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 relative path you want to jump to. It will look for this matching route and jump from the next level of the current route.

| More API usage is updated on github

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

Recommended reading:

jquery determines whether the element content exists

Nodejs Electron ubuntu installation steps detailed explanation

The above is the detailed content of Summary of angular+routerlink jump methods. For more information, please follow other related articles on the PHP Chinese website!