Perbincangan ringkas tentang navigateByUrl dan menavigasi dalam lompatan penghalaan sudut

Artikel ini akan memperkenalkan kepada anda Angular navigateByUrl dan navigasi dalam Router routing jump, dan lihat cara menggunakan navigate() dan navigateByUrl().

Sebelum memulakan pertempuran sebenar, mari kita lihat pengenalan navigateByUrl dan navigasi dalam dokumen rasmi. [Cadangan tutorial berkaitan: "tutorial sudut"]

navigateByUrl():

Definisi: Navigasi berdasarkan URL yang disediakan, Laluan mutlak mesti digunakan
Parameter: url (rentetan | UrlReee), tambahan (objek yang mengandungi set sifat, yang akan mengubah suai strategi navigasi)
Nilai pulangan: Mengembalikan Janji. Apabila navigasi berjaya, ia akan menyelesaikan kepada benar; apabila navigasi gagal atau ralat berlaku, ia akan menyelesaikan kepada palsu

ps: Penjelasan rasmi tentang penggunaan dan definisi navigateByUrl telah sangat jelas. Namun, jika ingatan kita tentang definisi laluan mutlak dan laluan relatif agak kabur, maka saya akan berikan contoh secara langsung supaya saya tidak mengganggu anak kecil untuk pergi mencari Du Niang lagi. Siapa saya untuk bertimbang rasa.

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

navigasi():

Definisi: Navigasi berdasarkan tatasusunan arahan dan laluan titik permulaan yang disediakan. Jika laluan titik permulaan tidak ditentukan, navigasi mutlak bermula dari laluan akar
Parameter: arahan (mana-mana[]), tambahan
Nilai pulangan: Mengembalikan Janji. Apabila navigasi berjaya, ia akan menyelesaikan kepada benar; apabila navigasi gagal, ia akan menjadi palsu apabila navigasi gagal, ia akan menolak (menolak)

Perlu diperhatikan bahawa bahagian pertama <; 🎜>menavigasi Setiap parameter mestilah dalam bentuk tatasusunan, iaitu mana-mana[].

Berbalik kepada topik dan kembali kepada fungsi, kedua-dua kaedah ini digunakan untuk penghalaan lompatan dalam sudut. Jadi, kami mempunyai xxx penggunaan biasa berikut dalam projek sebenar Mari kita lihat satu persatu~~

---

Dalam pertempuran sebenar, kami mula-mula mentakrifkan tiga laluan, iaitu "laluan" a. , laluan b, laluan c”.

Tiga laluan ini adalah laluan adik-beradik dan semuanya berada dalam direktori akar.

---

navigateByUrl

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

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

navigateByUrl agak mudah untuk digunakan, mudah difahami dan penggunaannya agak mudah. Kami terutamanya memperkenalkan penggunaan navigasi berikut~~

navigasi

1 Lompat dari laluan b ke laluan c (lompat berdasarkan laluan akar)

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

2. Laluan b melompat ke laluan c (melompat berdasarkan laluan semasa)

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.

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

4. Laluan b melompat ke laluan c (laluan membawa titik sauh untuk melompat)

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

5 dalam laluan)

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 Laluan b melompat ke laluan c (status semasa tidak akan direkodkan dalam sejarah semasa navigasi)

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

Akhir sekali, comel~

Jangan lupa untuk memperkenalkan penghala apabila menggunakan penghalaan~~

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

Selain itu, jika Jika anda ingin mencetak parameter yang dibawa, coretan kod adalah seperti berikut:

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

happyEnding...

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari:

Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang navigateByUrl dan menavigasi dalam lompatan penghalaan sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!