在uniapp中，进行页面跳转并携带参数（例如文章ID）可以通过两种主要的方式实现：使用URL参数和全局状态管理（如Vuex）。下面我将详细说明这两种方法：

1. 使用URL参数

这是最简单且直接的方法来传递轻量级的数据如文章ID。在跳转链接时，您可以将参数附加到URL后，然后在目标页面中获取这些参数。

发起跳转

假设您从文章列表页面跳转到文章详情页面，并希望传递文章的ID：

function navigateToArticle(articleId: number) {
  uni.navigateTo({
    url: `/pages/article/index?id=${articleId}`
  });
}

接收参数

在文章详情页面的 onLoad 钩子函数中获取传递的参数：

// 在 Article.vue 中
<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  const { id } = this.$route.query;
  console.log('文章ID:', id);
  // 可以使用这个ID来加载文章详情
});
</script>

2. 使用全局状态管理（例如Vuex）

如果您的应用结构复杂，或者需要在多个组件或页面之间共享数据，使用全局状态管理库如Vuex是一个好选择。

安装Vuex

首先，确保安装了Vuex：

npm install vuex@next --save  # 对于 Vue 3

配置Vuex

创建一个新的Vuex store：

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

const store = createStore({
  state() {
    return {
      articleId: null
    };
  },
  mutations: {
    setArticleId(state, id) {
      state.articleId = id;
    }
  }
});

export default store;

在 main.ts 中引入并使用这个store：

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

使用Store

在发起跳转前，设置文章ID：

// 列表页面组件
function navigateToArticle(articleId: number) {
  this.$store.commit('setArticleId', articleId);
  uni.navigateTo({
    url: `/pages/article/index`
  });
}

在目标页面获取文章ID：

// 文章详情页面
<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const articleId = computed(() => store.state.articleId);

console.log('文章ID:', articleId.value);
</script>

总结

对于简单的参数传递（如ID），使用URL参数是最快捷的方法。对于需要在多个页面或组件间共享较复杂状态的场景，使用Vuex或其他全局状态管理工具会更加合适。这样可以在应用的任何部分方便地访问和操作这些状态。