A brief discussion on navigateByUrl and navigate in Angular routing jumps

This article will introduce to you Angular NavigateByUrl and navigate in Router routing jump, and see how to use navigate() and navigateByUrl().

Before we start the actual combat, let’s take a look at the introduction of navigateByUrl and navigate in the official documents. [Related tutorial recommendations: "angular tutorial"]

navigateByUrl():

Definition: Navigate based on the provided URL, Absolute path must be used
Parameters: url (string | UrlReee), extras (an object containing a set of properties, which will modify the navigation strategy)
Return value: Returns a Promise. When the navigation is successful, it will resolve to true; when the navigation fails or an error occurs, it will resolve to false

ps: The official explanation of the usage and definition of navigateByUrl has been very clear. However, if our memory of the definition of absolute path and relative path is a bit vague, then I will give an example directly so that I won’t bother the little ones to go find Du Niang again. Who made me considerate

E:\mySoft\Git\bin  // 绝对路径。从盘符开始
Git\bin  // 相对路径。从当前路径开始

navigate():

Definition: Navigate based on the provided command array and origin route. If the starting point route is not specified, absolute navigation starts from the root route
Parameters: commands (any[]), extras
Return value: Returns a Promise. When the navigation is successful, it will resolve to true; when the navigation fails, it will resolve to false; when the navigation error occurs, it will reject (reject)

The noteworthy point is that the first of navigate Each parameter must be in the form of an array, that is, any[].

Getting back to the topic, returning to the function, these two methods are used for routing jumps in angular. Then we have the following common xxx usages in actual projects. Let’s take a look at them one by one~~

---

In actual combat, we first define three routes, namely "routing" a, route b, route c”.
These three routes are sibling routes and are all in the root directory.

---

navigateByUrl

路由a跳转到路由b
this.router.navigateByUrl('b');  // 正确。解析结果是 localhost:4200/b
this.router.navigateByUrl('./b');  // 错误。只能是绝对路径哦

路由b跳转到路由c
this.router.navigateByUrl('cascader', {});  // 解析结果是 localhost:4200/c

The usage of navigateByUrl is relatively simple, easy to understand, and the usage is relatively simple. We mainly introduce the following usage of navigate~~

navigate

1. Route b jumps to route c (jump based on the root route)

this.router.navigate(['c']);  // 绝对路径。 localhost:4200/c
this.router.navigate(['./c']);  // 相对路径。 localhost:4200/c

2. Route b jumps to route c (jump based on the current route)

this.router.navigate(['c'],{ relativeTo:this.route });  // localhost:4200/b/c
this.router.navigate(['c',1],{ relativeTo:this.route });  // localhost:4200/b/c/1

3. Route b jumps to route b (jump based on the current route) )

this.router.navigate([],{ relativeTo:this.route });  // localhost:4200/b

4. Route b jumps to route c (the anchor point is carried in the route to jump)

this.router.navigate(['c'],{ fragment:'zita' });  // localhost:4200/c#zita
	现在么，成功跳转到路由c了。我又想从路由c跳转到路由a（携带锚点跳转）
	this.router.navigate(['a'], { preserveFragment: true});  // localhost:4200/a#zita

5. Route b jumps to route c (the parameter is passed in the route to jump) Transfer)

this.router.navigate(['c'],{ queryParams:{name:'zita'} });  // localhost:4200/c?name=zita
	现在么，成功跳转到路由c了。我又想从路由c跳转到路由a,有以下五种情况：
	
	（1）不携带参数跳转
	this.router.navigate(['a'], { queryParamsHandling: null });  // localhost:4200/a
	（2）携带参数跳转
	this.router.navigate(['a'], { queryParamsHandling: 'merge'});  // localhost:4200/a?name=zita
	
	执行完以下三种情况的代码后，看到的页面是路由a的页面哦！
	（3）携带参数。浏览器中的URL不变，参数会失效即,在路由a中打印的参数结果是{}
	this.router.navigate(['a'], { skipLocationChange: true });  // localhost:4200/c?name=zita
	（4）携带参数。浏览器中的URL不变，参数有效。在路由a中打印的参数结果是{name: "zita"}
	this.router.navigate(['a'], {skipLocationChange: true, queryParamsHandling: 'merge'});  // localhost:4200/c?name=zita
	（5）携带参数。浏览器中的URL不变，参数有效，并且携带上其他参数。在路由a中打印的参数结果是{name: "zita",sex: "female"}
	this.router.navigate( ['a'], {skipLocationChange: true, queryParamsHandling: 'merge', queryParams: { sex: 'female' } });  // localhost:4200/c?name=zita

6. Route b jumps to route c (the current status will not be recorded in the history during navigation)

 在路由c中，点击浏览器的返回按钮，会忽略路由b而直接跳转回到路由b的上一层路由
this.router.navigate(['c'],{ replaceUrl:true });  // localhost:4200/c

Finally, Little cuties~

Don’t forget to introduce router when using routing~~

import { Router } from '@angular/router';
constructor( private router: Router) { }

In addition, if you want to print the parameters carried, the code snippet is as follows:

import { Router, ActivatedRoute, Params } from '@angular/router';
ngOnInit() {
    this.route.queryParams.subscribe((params: Params) => {
      console.log(params);
    });
}

happyEnding…

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A brief discussion on navigateByUrl and navigate in Angular routing jumps. For more information, please follow other related articles on the PHP Chinese website!