Vue3开发极简入门（11）：query传参

欢迎大家来到IT世界,在知识的湖畔探索吧!

列表页传参Staff.vue：

<template> <div class="staff"> <main class="container"> <aside class="sidebar"> <nav> <ul> <li v-for="staff in staffList" :key="staff.id"> <!-- <router-link :to="`/staff/info?id=${staff.id}&name=${staff.name}&age=${staff.age}`" active-class="activeLink">{{ staff.name }}</router-link> --> <router-link :to="{ path: '/staff/info', query: { id: staff.id, name: staff.name, age: staff.age } }" active-class="activeLink"> {{ staff.name }} </router-link> </li> </ul> </nav> </aside> <section class="content"> <router-view /> </section> </main> </div> </template> <script lang='ts' setup name='Staff'> import { reactive } from 'vue'; // 数据准备 const staffList = reactive([ { id: "1", name: "张三", age: 22 }, { id: "2", name: "李四", age: 23 }, { id: "3", name: "王五", age: 24 } ]) </script> <style scoped> .staff { background-color: darkslategrey; } .container { display: flex; margin-top: 10px; } .sidebar { width: 50px; color: white; box-sizing: border-box; } .sidebar nav ul { list-style-type: square; padding: 0; } .sidebar nav ul li { margin: 15px 0; color: gold; } .content { flex: 1; width: 600px; box-sizing: border-box; overflow-y: auto; background-color: #ecf0f1; } .activeLink { color: white; } </style>

欢迎大家来到IT世界,在知识的湖畔探索吧!

有两种跳转传参的写法如下。

URL式：

欢迎大家来到IT世界,在知识的湖畔探索吧!<router-link    :to="`/staff/info?id=${staff.id}&name=${staff.name}&age=${staff.age}`">   {{ staff.name }} <router-link>

这种写法太丑，传参多的话，后面跟一大串。这种写法适合传1个参数，例如id这种。

对象式：

<router-link    :to="{     path: '/staff/info',     query: {       id: staff.id,       name: staff.name,       age: staff.age     }   }">{{ staff.name }}</router-link>

之前在路由文件src/router/index.ts里面设置了name，这里可以用path，也可以用name。

详情页取参StaffInfo.vue：

欢迎大家来到IT世界,在知识的湖畔探索吧!<template> <div class="staffInfo"> <ul> <li>主键：{{ query.id }}</li> <li>姓名：{{ query.name }}</li> <li>年龄：{{ query.age }}</li> </ul> </div> </template> <script lang='ts' setup name='StaffInfo'> import { toRefs } from 'vue'; import { useRoute } from 'vue-router'; const route = useRoute() const { query } = toRefs(route) </script> <style scoped> .staffInfo { background-color: moccasin; color: black; } ul li { list-style-type: none; margin-top: 10px; } </style>

代码简单，不赘述，注意复习之前讲的hook函数、toRefs。