Uni-app的页面路由和导航是基于组件间的通信机制_uniapp navigateto 记录路由历史吗-CSDN博客

本文链接：https://blog.csdn.net/blog_programb/article/details/141370315

Uni-app的页面路由和导航是基于组件间的通信机制。路由通常用于管理应用内的页面结构，通过navigateTo和redirectTo方法实现页面之间的跳转。navigateTo会将跳转的页面添加到历史栈中，而redirectTo则不保存历史记录。

页面栈（Historical Stack）: 使用getCurrentPages()可以获取当前页面的栈，这个栈包含了从初始加载到最后访问的所有页面。当需要返回上一页面时，可以通过navigateBack方法，可设置delta参数来指定返回的层级，如uni.navigateBack({delta: 2})表示返回上两层，即返回到调用navigateTo('B')的那个页面。
页面通讯: Uni-app提供了事件总线来进行页面间的通信。例如，在A页面点击按钮后，可以触发一个事件，让后续访问的B页面接收并执行相应操作。
路由跳转:
- uni.navigateTo(url, options)：跳转到指定的URL，支持传入参数。
- uni.redirectTo(url, options)：无返回历史记录地跳转到指定URL。
返回上一页（ReLaunch）: 如果你想强制替换当前页面而不是返回历史中的某个页面，可以使用reLaunch方法，但请注意这会清除页面栈，每次调用都会重新加载目标页面。例如：
```
uni.reLaunch({
  url: '路径/至/目标页面'
});
```

在Uni-app中，你可以使用事件总线来进行页面间的通信，即使它们没有直接的父子关系。这主要依赖于uni.$emit()和uni.$on()这两个全局事件处理器。

发布事件：
当A页面想要向其他页面发送信息时，可以在A页面中调用uni.$emit(eventName, data)，其中eventName是你自定义的事件名称，data是要传递的数据。例如：
```
uni.$emit('myCustomEvent', { key: 'value' });
```
订阅事件：
B页面或者其他接收者页面，可以通过uni.$on(eventName, callback)来监听这个事件。当事件触发时，callback会被执行并接收到传来的数据。例如：
```
uni.$on('myCustomEvent', function(e) {
  console.log('Received data:', e.data);
});
```
销毁监听：
在不再需要接收事件的地方，记得调用uni.$off(eventName, callback)来移除事件监听，防止内存泄漏。

实践案例中提到的 Uni-App 的 UniOrganization 组件可以作为发布者或接收者，展示整个过程。

除了全局事件总线，Uni-app还支持其他组件间通信的方式：

**props和 $e mi t * * ：父组件可以通过 ‘ p ro p s ‘ 向子组件传递数据，而子组件则可以通过 ‘$ emit`触发自定义事件，将数据传递回父组件。
Vuex: 当需要更复杂的单向数据流管理时，可以使用Vuex状态管理模式，它允许在应用的不同部分存储和共享状态。
自定义指令: Uni-app允许开发者创建自定义指令，如v-model，用于双向绑定组件属性，这在组件间传递简单数据时非常方便。
Service或Shared Data Module: 对于跨页面的数据共享，可以使用uni-app的Service或在项目中创建单独的模块来保存数据，这样可以在不同的页面中访问和更新这些数据。
插槽(Slots): 如果组件设计允许，通过插槽可以方便地让子组件参与到其父组件的结构中，从而传递内容。

实践案例文件"uni-app全局变量的几种实现方式.zip"可能会提供针对这些通信机制的具体示例。

Uni-app中的Vuex是一种状态管理模式，它允许你在Vue应用程序中以集中式存储管理共享的数据状态。以下是Vuex工作的一个简单示例：

创建store: 首先，在项目的store目录中初始化一个Vuex实例，定义state（存储的数据）和mutations（改变状态的方法）。

// store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    nickname: "默认昵称", // 初始化状态
  },
  mutations: {
    SET_NICKNAME(state, nickname) { // 声明一个用于更新昵称的 mutation
      state.nickname = nickname;
    },
  },
});

export default store;

在组件中调用: 在Vue组件中通过mapState, mapGetters, mapActions, 和 mapMutations来访问和修改这些状态。例如，可以这样获取并显示昵称：

<template>
  <div>{{ nickname }}</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['nickname']), // 获取nickname状态
  },
};
</script>

状态变化通知: 当状态发生改变时，所有依赖于该状态的组件会自动重新渲染，无需手动触发。这对于管理复杂的业务逻辑非常有用。
分发动作: 使用actions可以在异步操作（如网络请求）中更改状态，保持视图与状态的一致性。

要在 Uni-app 中注册和使用 Vuex，您需要执行以下步骤：

环境配置：
在您的项目开始时，确保已安装 Node.js 和 Uni-app 的依赖项，如 CLI 工具和 UView UI 模板。运行以下命令安装 Vue.js 和 Vuex：
```
npm install vue vuex @dcloudio/uni-app-cli-plugin-vuex
```

创建状态管理结构:

设置状态容器（store）：如引用所示，在项目的根目录下创建 store 文件夹，然后创建一个名为 index.js 的文件，添加基本的 Vuex 实例：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    nickname: "初始值"
  },
  mutations: {},
  // 更多状态管理和操作可以在这里添加
});

export default store;

在组件中注入 Store：
在每个需要使用 Vuex 的组件中，通过 Vue 的 provide 和 inject 功能来注入和访问 store：

// components/MyComponent.vue
import store from '@/store/index';

export default {
  setup(props, context) {
    context.provide('store', store);
    return { ... };
  }
};

在组件中使用 Store：
在组件内部，可以通过 this.$store 访问到 store：

<template>
  <div>
    <h1>Nickname: {{ nickname }}</h1>
    <!-- 使用 store 中的数据 -->
  </div>
</template>

<script>
import { ref } from 'vue';
import { mapState } from 'vuex';

export default {
  setup() {
    const nickname = mapState(['nickname']);
    return {
      // ...
      computed: {
        ...nickname,
      },
    };
  },
};
</script>

在Uni-App中，组件间的通信可以通过几种方式进行：

属性绑定（Property Binding）: 当子组件需要向父组件传递数据时，通常使用props（属性）来实现。通过<child :prop="value" />的形式，子组件可以在onLoad生命周期钩子或其他适当时刻设置value，父组件则通过监听这个属性的变化来获取数据。
事件总线（Event Bus）: 使用全局事件总线来共享信息，这是一种常见的解耦方式。尽管不是uni-app官方推荐，但在一些场景下会用到。创建一个自定义事件总线，然后在各个组件间发布和订阅事件。

事件Channel（Event Channel）: uni-app提供了eventchannel API，它允许跨页面实时双向通信。创建一个EventChannel实例，然后通过send和receive方法发送和接收数据。比如：

import { eventChannel } from '@dcloudio/uni-app'

const channel = eventChannel({
  sender() {
    return new MessageChannel()
  }
})

// 子组件发送数据
channel.sender.postMessage({ type: 'data', payload: 'from-child' })

// 父组件接收数据
channel.receive((message) => {
  console.log('Received data:', message)
})