在 Ionic Vue 中通过路由链接传递动态对象属性到嵌套选项卡

vue.js

2024-03-13 20:19:09

通过路由链接在 Ionic Vue 中传递动态对象属性到嵌套选项卡

简介

在 Ionic 和 VueJS 中，经常需要在选项卡之间传递数据。本文将提供分步指南，说明如何通过路由链接将动态对象属性传递到嵌套选项卡，以便在目标选项卡中显示这些属性。

问题：

我们的目标是将电影数据对象作为 prop 通过 router-link 传递到嵌套选项卡 MoviePage.vue 中。在将电影数据对象作为 prop 检索后，我们希望在 MoviePage 选项卡上显示其部分属性。

解决方案：

1. 创建一个提供者组件：

在父组件（Tab2Page.vue）中，使用 provide() 函数创建电影数据对象的提供者。

// Tab2Page.vue
import { ref, provide } from 'vue';

const movieData = ref(null);

const fetchData = async () => {
    // ... Fetch movie data
    provide('someMovieData', movieData.value);
};

fetchData();

2. 使用 inject() 在目标组件中获取数据：

在目标组件（MoviePage.vue）中，使用 inject() 函数获取提供者提供的数据。

// MoviePage.vue
import { defineProps, inject } from 'vue';

const someMovieData = inject('someMovieData');

3. 将数据传递给 router-link：

在 Tab2Page.vue 中，将电影数据对象的 Id 属性作为 router-link 的参数传递。

// Tab2Page.vue
<ion-button :router-link="`/tab2/movie/${movie.Id}`" router-direction="forward">更多信息</ion-button>

4. 在路由中定义 props：

在路由配置文件（routes -> index.ts）中，在目标选项卡的路由配置中启用 props。

// routes -> index.ts
{
    path: '/tabs/',
    component: TabsPage,
    children: [
        {
            path: '/tab2/movie/:movieId',
            name: 'movieInfo',
            component: () => import('@/views/MoviePage.vue'),
            props: true
        }
    ]
}

5. 在目标组件中接收 props：

在 MoviePage.vue 中，使用 defineProps() 函数定义接收的 props。

// MoviePage.vue
import { defineProps } from 'vue';

const props = defineProps({
    movieId: String
});

6. 使用接收到的 props：

现在，可以在 MoviePage.vue 中使用接收到的 movieId prop 来获取电影数据并显示其属性。

// MoviePage.vue
<ion-content :fullscreen="true">
    <p>{{ someMovieData.Movies.find(m => m.Id === props.movieId).Title }}</p>
    <ion-img :src="someMovieData.Movies.find(m => m.Id === props.movieId).LargePosterUrl"></ion-img>
</ion-content>