Vue3学习日志（2）：通过router实现页面间传递参数

 在使用router.push跳转到新页面，新页面需要参数来向后台请求数据来渲染页面，请求的参数需要从上一个页面传递过来，就需要使用路由传值，通过路由的 params 或 query 来实现，可以通过 props 或者 $route.params 来访问传递的参数。由于我们在路由配置中设置了 props: true，Vue Router 会自动将路由参数作为 props 传递给组件。

首先配置路由，param1就是我们需要传递参数的名称。

// router.ts
//需要接受参数的新页面的路由配置

{
        path: 'creatmodel/:param1',
        name: 'Creatmodel',  
        component: () => import('@/pages/CreateModel.vue'),
        props: true
 },

配置传值的页面。

//old.vue
//需要从这个页面传递参数到新的页面，通过button来触发事件

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  const router = useRouter();  
  const handleClick = async (item) => {
    console.log(item.dessert);
    router.push({  
      name: 'Creatmodel',   
      params: { param1: item.dessert } // 获取的页面的table中的元素，作为要传递的参数  
  });  

}
</script>

接收参数的页面。

//new.vue

<script lang="ts" setup>

  const props = defineProps<{ param1: string }>();  
  console.log(props.param1)

</script>

在路由配置中启用了 props 解构，param1将作为 prop 自动可用。