Angular+RouterLink makes different fancy jumps

php中世界最好的语言
Release: 2018-06-01 11:36:55
Original
1265 people have browsed it

This time I will bring you Angular RouterLink to make different fancy jumps. What are theprecautions 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 Objectis enhanced as a routing entry:

@View({ directives:[RouterOutlet,RouterLink] template : ` ` })
Copy after login
RouterLink instruction adds click

eventmonitoring 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:

   
Copy after login
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`
Copy after login

Writing method 1: Absolute path / route name

 跳呀跳  跳呀跳
Copy after login
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

跳呀跳
Copy after login
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

跳呀跳
Copy after login
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

跳呀跳
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!