Pinia+Router学习笔记（十）

第一种传参方式：query

<template>
    <h1>小满最骚</h1>
    <router-link replace to="/reg">点击replace</router-link>
    <router-link to="/login">返回Login</router-link>
    <br />
    <button @click="toPage(item)">Reg</button>
    <router-view></router-view>
</template>


<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const item: Item = {
    name: 'Reg',
    price: 666,
    id: '001',
}
type Item = {
    name: string
    price: number
    id: string
}
const toPage = (item: Item) => {
    router.push({
      // 这里可以使path也可以是name
        path:'/reg',
      // 利用query传递参数
        query: item,
    })
}
</script>


<style scoped></style>

特点：传递的参数会显示在地址栏上，不会随网页刷新发生变化

<template>
    <div>{{ route.query.name }}</div>
    <div>{{ route.query.price }}</div>
    <div>{{ route.query.id }}</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<style scoped></style>

第二种传参方式：params

由于笔者在尝试不做动态路由匹配，直接传递params参数时发现参数并不能正确传递（跳转过去就没了），因此此处直接进入动态路由匹配环节

params传参方式允许将参数保存在内存中，但由于刷新会导致参数消失，因此需要在路由配置中使用：占位符提前指定参数列表

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        component: () => import('../components/login.vue'),
    },
    {
    // 使用/:参数名来定义参数列表
        path: '/reg/:id/:price',
        name: 'Reg',
        component: () => import('../components/reg.vue'),
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

<template>
    <h1>小满最骚</h1>
    <router-link replace to="/reg">点击replace</router-link>
    <router-link to="/login">返回Login</router-link>
    <br />
    <button @click="toPage(item)">Reg</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const item: Item = {
    name: 'Reg',
    price: 666,
    id: '001',
}
type Item = {
    name: string
    price: number
    id: string
}
const toPage = (item: Item) => {
    router.push({
    // 若要使用params传参方式则这里必须使用name，params对象的key要和router那边一一对应
        name: 'Reg',
        params: {
            id: item.id,
            price: item.price,
        },
    })
}
</script>

<style scoped></style>

注意两点：

1. 对于编程式路由导航，params传参方式只能使用name属性跳转
2. params参数中的key要和router中预定义的参数名对应

最后：如果使用+params传参的方式，则to中的url必须附带正确的参数数量

<!-- 本例中/reg是path路径,/0/0分别对应id和price -->
<router-link replace to="/reg/0/0">点击replace</router-link>