Vue-Router 第九节：路由传参
前言：路由传参主要有两种方式：query 路由传参 、 params路由传参，下面来学习这两种方式，并总结他们的区别。
1、query路由传参
// router/index.ts
import About from '@/views/about/index.vue'
import path from 'path';
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
// 可直接导入或者引入
{
path: '/',
component: () => import("@/views/home/index.vue"),
},
{
path:'/user',
name:'user',
component:import("@/views/user/index.vue")
}
]
// 2、创建路由实例并传递routes
const router = createRouter({
// 路由的模式： vue2:
// vue2 mode history | vue3 createWebHistory
// vue2 mode hash | vue3 createWebHashHistory
// vue2 mode abstact | vue3 createMemoryHistory
history: createWebHistory(),
routes
})
// 导出
export default router
// App.vue
<template>
<div>
<router-view />
<button @click="Topages">进入user路由页面</button>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const Item ={ // ********* 要传的参数
name:'月月',
age:18,
hobby:'吃饭'
}
const router = useRouter()
const Topages = () => {
router.push({ path: '/user', query: Item }) // ********* 进行传参
}
</script>
<style scoped></style>
// user/index.vue
<template>
<div style="background-color: pink;">
<H1>
欢迎进入技术部专属页面！<br>
姓名：{{ $route.query.name }}<br>
年龄：{{ $route.query.age }}<br>
爱好：{{ $route.query.hobby }}
</H1>
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
</script>
<style></style>
2、Params路由传参
// router/index.ts
{
path:'/user/:name/:age',
//********** params传参必须在路由配置设置占位符参数，添加了一个:name占位符，就传递一个为name的参数。这里添加了两个
name:'user',
component:import("@/views/user/index.vue"),
}
// App.vue
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
const Topages = () => {
router.push({ name: 'user', params: { name: '月月', age: '18' } }) //配置几个就只能传几个
}
</script>
// user/index.vue
<template>
<div style="background-color: pink;">
<H1>
欢迎进入技术部专属页面！<br>
姓名：{{ route.params.name }}<br>
年龄：{{ route.params.age }}<br>
</H1>
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute() // 可用 useRoute() 获取参数
</script>
<style></style>
3、query和Params的区别
- query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
- query 在路由配置不需要设置参数，而 params 必须设置占位符参数
- query 传递的参数会显示在地址栏中， 只能接受对象， 现在params传递的参数也会在地址栏中显示
- params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
- 路由配置
