vue中的路由传参（vue3的路由传参query、params以及动态路由传参）

一    
    
    
、query传参

编程式导航 使用router.push 或者 router.replace 的时候    
    
    
，改为对象形式新增query 必须传入一个对象

import { useRouter } from vue-router; ... const router = useRouter() const toDetail = (item: Item) => { router.push({ path: /info, query: item }) }

接受参数

使用 useRoute 的 query

<template> <div> <div>ID：{{route.query?.id}}</div> <div>名称：{{route.query?.name}}</div> <div>价格：{{route.query?.price}}</div> </div> </template> <script setup lang=ts> import { useRoute } from vue-router; ... const route = useRoute() </script> <style lang=less scoped></style>

二


     


     


     、params传参

编程式导航 使用router.push 或者 router.replace 的时候     


     


     


，改为对象形式并且只能使用name




 




 




 ，path无效
   

   

   
，然后传入params

import { useRouter } from vue-router; ... const router = useRouter() const toDetail = (item: Item) => { router.push({ name: Info, params: item }) }

接受参数

使用 useRoute 的 params

<template> <div> <div>ID：{{route.params?.id}}</div> <div>名称：{{route.params?.name}}</div> <div>价格：{{route.params?.price}}</div> </div> </template> <script setup lang=ts> import { useRoute } from vue-router; ... const route = useRoute() </script> <style lang=less scoped></style>

三
 




 




 



、动态传参

很多时候     

     

     

，我们需要将给定匹配模式的路由映射到同一个组件    
    
    
。

例如 




  




  




 ，我们可能有一个 User 组件

  


  


  
，它应该对所有用户进行渲染     
     
     
，但用户 ID 不同     


     


     


。在 Vue Router 中  




   




   




 ，我们可以在路径中使用一个动态字段来实现


 



 



 
，我们称之为 路径参数 // router.ts import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; const routes: Array<RouteRecordRaw> = [{ path: /, name: table, component: () => import(@/view/Table/index.vue) }, { path: /info/:id, name: Info, component: () => import(@/view/Table/info.vue) }, ... ] const router = createRouter({ history: createWebHistory(), routes }) export default router import { useRouter } from vue-router; ... const router = useRouter() const toDetail = (item: Item) => { router.push({ name: Info, params: {id: item.id} }) }

接受参数

使用 useRoute 的 params

<template> <div> <div>ID：{{ item?.id }}</div> <div>名称：{{ item?.name }}</div> <div>价格：{{ item?.price }}</div> </div> </template> <script setup lang=ts> import { useRoute } from vue-router; import { data } from ./data.json ... const route = useRoute() // 模拟根据id获取数据 const item = data.find(v => v.id === Number(route.params.id)) </script> <style lang=less scoped></style>

四   

   

   

、query传参和params传参的区别

query 传参配置的是 path               ，而 params 传参配置的是name   




    




    




 ，且在 params中配置 path 无效 query传递的参数会显示在地址栏中














，而params传参不会 query传参刷新页面数据不会消失               ，而params传参刷新页面数据回消失 params可以使用动态传参    



     



     



 ，动态传参的数据会显示在地址栏中














，且刷新页面不会消失    
    
    
，因此可以使用动态params传参     


     


     


，根据动态传递参数在传递页面获取数据




 




 




 ，以防页面刷新数据消失