使用路由传参

最新推荐文章于 2025-07-10 21:17:09 发布

Lucky_zss

最新推荐文章于 2025-07-10 21:17:09 发布

阅读量107

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/zss_base/article/details/137549616

本文介绍了如何在Vue应用中使用`vue-router`进行页面间路由时的参数传递，包括在第一个页面通过`useRouter`设置查询参数，以及在第二个页面通过`useRoute`接收并处理这些参数的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用路由传参
第一个页面
<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter()

const goDetails =()=>{
  router.push({
        path: '/detailsPage',
        query:{
          name:'天赐',
          age:'19',
          sex:'男'
        }
    })
}


第二个页面
使用route接收参数

import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route.query);

console.log(route.query.name);
let name = route.query.name
console.log(name);