vue页面跳转路由进行数据传递

1. 使用动态路由 params 参数

在路由表中：

import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  {
    path: "/",
    redirect: "home"
  },
  {
    path: "/detail/:id",
    component: () => import("@/views/detail/detail.vue")
  },
  {
    path: "/home",
    component: () => import("@/views/home/home.vue")
  },
  {
    path: "/search",
    component: () => import("@/views/search/search.vue")
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

<template>
    <template v-for="item in houeseList" :key="item.data.houseId">
    <house-item
      @click="itemClick(item.data)"
    ></house-item>
    </template>
</template>

<script setup>
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import useHomeStore from "@/stores/modules/home";
import houseItem from "@/components/house-item/house-item.vue";

const router = useRouter()
const homeStore = useHomeStore();
const { houeseList } = storeToRefs(homeStore);

const itemClick = (item) => {
  //跳转到房间详情页 假设item.houseId是44173741
  router.push("/detail/" + item.houseId)
}
</script>

<script setup>
import { useRoute} from "vue-router";
const route = useRoute();
const houseId = route.params.id; //44173741
</script>

2. 使用路由的 query 查询字符串参数

<template>
    <div class="btn" @click="searchBtnClick">开始搜索</div>
</template>
<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
//...
const searchBtnClick = () => {
  router.push({
    path: '/search',
    query: {
      startDate: startDate.value,
      endDate: endDate.value,
      currentCity: currentCity.value.cityName
    }
  })
}
</script>

<template>
    <div class="search">
      <div>开始时间：{{ $route.query.startDate}}</div>
      <div>结束时间：{{ $route.query.endDate}}</div>
      <div>当前城市：{{ $route.query.currentCity}}</div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
</script>