UniApp navigator组件教程

UniApp navigator组件 教程

如何使用navigator组件进行页面跳转

UniApp是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、以及各种小程序等多个平台。在UniApp中，`navigator`组件是一个用于页面跳转的组件。本文将详细介绍如何使用`navigator`组件进行页面跳转，并附带一个案例讲解。

一、navigator组件的基本用法

`navigator`组件用于页面跳转，可以跳转到应用内的其他页面，也可以跳转到外部链接。它的基本用法如下：

<navigator url="/pages/targetPage/targetPage">
    跳转到目标页面
</navigator>

其中，`url`属性指定了要跳转到的页面的路径。

二、navigator组件的属性

`navigator`组件具有以下属性：

`url`：指定要跳转到的页面的路径。
`open-type`：指定跳转方式，默认为`navigate`。可选值有`navigate`（保留当前页面，跳转到应用内的某个页面）、`redirect`（关闭当前页面，跳转到应用内的某个页面）、`switchTab`（跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面）、`reLaunch`（关闭所有页面，打开到应用内的某个页面）、`exit`（退出小程序，仅在微信小程序中有效）、`url`（跳转到外部链接，仅在微信小程序中无效）。
`delta`：表示在 tabBar 页面间的跳转中，要跳转的页面在 tabBar 中的索引位置，仅在`open-type=”switchTab”`时有效。

三、案例讲解

下面是一个使用`navigator`组件进行页面跳转的案例：

假设我们有两个页面：`index`页面和`targetPage`页面。

1. 创建index页面

在`pages/index/index.vue`文件中，添加一个`navigator`组件：

<template>
    <view>
        <navigator url="/pages/targetPage/targetPage" open-type="navigate">
            跳转到目标页面
        </navigator>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 可以在这里定义页面的数据
        };
    },
    methods: {
        // 可以在这里定义页面的方法
    }
};
</script>

<style>
/* 可以在这里定义页面的样式 */
</style>

2. 创建targetPage页面

在`pages/targetPage/targetPage.vue`文件中，添加页面的内容：

<template>
    <view>
        <text>这是目标页面</text>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 可以在这里定义页面的数据
        };
    },
    methods: {
        // 可以在这里定义页面的方法
    }
};
</script>

<style>
/* 可以在这里定义页面的样式 */
</style>

3. 配置路由

确保在`pages.json`文件中已经配置了这两个页面的路由：

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/targetPage/targetPage",
            "style": {
                "navigationBarTitleText": "目标页面"
            }
        }
    ]
}