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传参     


     


     


     

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




 




 




 




，以防页面刷新数据消失