Nativescript 路由器导航

Nativescript 路由器（Router）提供了一种方便快捷的方式来进行页面导航。这个模块是最常用的模块之一，可以帮助开发者实现页面之间的导航。

安装

在安装 Nativescript 时，路由器已经预装了。如果你没有安装 Nativescript，可以使用以下代码进行安装：

npm install -g nativescript

创建路由器

创建

可以使用 createRouter 方法创建路由器。以下是一个创建路由器的例子：

import { createRouter } from "nativescript-router";

const router = createRouter({
    routes: [
        { path: "/home", component: HomeComponent },
        { path: "/about", component: AboutComponent },
        { path: "/contact", component: ContactComponent }
    ]
});

上面的代码创建了一个路由器，其中包含了三个路由，分别对应 "/home"、"/about" 和 "/contact"。每个路由都有一个组件（component），可以在用户转到该路由时加载该组件，显示相应的页面。

导航

要在应用程序中导航到另一个页面，可以使用以下代码：

router.navigate(["/home"]);

上面的代码使用路由器导航到 "/home" 页面。

路由参数

路由参数可以在 URL 中传递，例如：

/home/123

在上面的 URL 中，"123" 是路由参数。

要在路由定义中使用路由参数，可以在路径中使用冒号（:）作为占位符，例如：

{ path: "/home/:id", component: HomeComponent }

上面的路由定义中使用了路由参数 id。

在 HomeComponent 中，可以通过 ActivatedRoute 对象来访问路由参数，例如：

import { ActivatedRoute } from "nativescript-angular/router";

@Component({...})
export class HomeComponent {
    constructor(private route: ActivatedRoute) {
        const id = route.snapshot.params["id"];
    }
}

上面的代码中，通过 route.snapshot.params["id"] 获取了路由参数的值。

生命周期

路由器提供了一些生命周期钩子，可以在应用程序中监听路由事件。

以下是一些常见的生命周期钩子：

• ngOnInit()：当路由器导航到组件时，调用此方法。
• ngOnDestroy()：当组件从 DOM 中销毁时，调用此方法。
• ngOnActivate()：当路由器导航到组件并激活该组件时，调用此方法。
• ngOnDeactivate()：当组件从激活状态变为非激活状态时，调用此方法。

总结

Nativescript 路由器提供了一种方便快捷的方式来进行页面导航。通过路由器，可以方便地控制应用程序的页面跳转，并且支持路由参数、生命周期等功能。