Vue3 路由传参

query

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

• 与path配合完成
• 刷新后页面参数不丢失

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

// 接参页面
<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()

params

编程式导航 使用router.push 或者 router.replace 的时候，改为对象形式并且只能使用name，path无效，然后传入params

• 与name配合完成
• 刷新后页面参数回丢失

// 传参页面
import { useRouter } from 'vue-router';

const router = useRouter()
const toDetail = (item: Item) => {
    router.push({
        name: 'Info',
        params: item
    })
}

// 接参页面
<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>

动态传参

// 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}
    })
}

// 接收参数页面
<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>