您现在的位置是：网站首页> 编程资料编程资料

vue3中路由传参query、params及动态路由传参详解_vue.js_

2023-05-24 342人已围观

简介 vue3中路由传参query、params及动态路由传参详解_vue.js_

一、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

二、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

三、动态传参

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

例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数

// router.ts import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; const routes: Array = [{ 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

四、query传参和params传参的区别

query 传参配置的是 path，而 params 传参配置的是name，且在 params中配置 path 无效
query传递的参数会显示在地址栏中，而params传参不会
query传参刷新页面数据不会消失，而params传参刷新页面数据回消失
params可以使用动态传参，动态传参的数据会显示在地址栏中，且刷新页面不会消失，因此可以使用动态params传参，根据动态传递参数在传递页面获取数据，以防页面刷新数据消失