位置: IT常识 - 正文

vue3的路由传参query、params以及动态路由传参(vue路由传参的几种方式)

发布时间：2024-01-16

vue3的路由传参query、params以及动态路由传参一、query传参

推荐整理分享vue3的路由传参query、params以及动态路由传参(vue路由传参的几种方式)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue路由传参的两种方式,vue路由传参的两种方式,vue路由传值的几种方式,vue路由传参query和params,vue中的路由传参,vue路由传参的三种基本方式简书,vue3的路由传参,vue路由传参的三种基本方式简书,内容如对您有帮助，希望把文章链接给更多的朋友！

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

import { useRouter } from 'vue-router';...const router = useRouter()const toDetail = (item: Item) => { router.push({ path: '/info', query: item })}接受参数 vue3的路由传参query、params以及动态路由传参(vue路由传参的几种方式)

vue3的路由传参query、params以及动态路由传参(vue路由传参的几种方式)

使用 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.tsimport { 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 routerimport { 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传参，根据动态传递参数在传递页面获取数据，以防页面刷新数据消失