在Vue項(xiàng)目中，你可以使用路由（vue-router）來實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù)。下面是一些常用的方法：

1. 使用路由的params屬性：

   • 在目標(biāo)頁面的路由配置中，設(shè)置props: true來啟用參數(shù)傳遞。
   • 在源頁面中，使用this.$router.push方法跳轉(zhuǎn)到目標(biāo)頁面，并傳遞參數(shù)。
   • 在目標(biāo)頁面中，通過this.$route.params獲取傳遞的參數(shù)。

2. 使用Vue的props屬性：

   • 在目標(biāo)組件中定義props屬性，用于接收傳遞的參數(shù)。
   • 在源頁面中，使用this.$router.push方法跳轉(zhuǎn)到目標(biāo)頁面，并在路由配置中設(shè)置props屬性，將參數(shù)綁定到props上。
   • 在目標(biāo)組件中，通過props屬性獲取傳遞的參數(shù)。

3. 使用Vuex進(jìn)行狀態(tài)管理：

   • 在Vuex中定義一個(gè)狀態(tài)（state），用于存儲(chǔ)要傳遞的參數(shù)。
   • 在源頁面中，通過Vuex的mutations方法將參數(shù)添加到狀態(tài)中。
   • 在目標(biāo)頁面中，通過Vuex的getter方法獲取傳遞的參數(shù)。

下面是一個(gè)使用路由params屬性的示例：

在目標(biāo)頁面的路由配置中設(shè)置props: true：

// router.js
{
path: '/target',
component: TargetComponent,
props: true // 啟用參數(shù)傳遞
}

在源頁面中使用this.$router.push方法跳轉(zhuǎn)到目標(biāo)頁面并傳遞參數(shù)：

// source.vue
<template>
<button @click="navigate">跳轉(zhuǎn)到目標(biāo)頁面</button>
</template><script>
export default {
methods: {
navigate() {
const param1 = 'Hello';
const param2 = 'World';
this.$router.push({ path: '/target', params: { param1, param2 } });
}
}
}
</script>

在目標(biāo)頁面中使用this.$route.params獲取傳遞的參數(shù)：

// target.vue
<template>
<div>
<p>傳遞的參數(shù)1: {{ $route.params.param1 }}</p>
<p>傳遞的參數(shù)2: {{ $route.params.param2 }}</p>
</div>
</template>