在vue3+ts项目里使用query和params传参(vue3加ts)

在vue3+ts项目里使用query和params传参 一 query 传参 （类似get请求）

推荐整理分享在vue3+ts项目里使用query和params传参(vue3加ts)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3 $attrs,vue3 $attrs,vue ts项目,vue3 ts知乎专栏,vue3 ts知乎专栏,vue在项目中怎么用的,vue3 + ts,vue3 ts知乎专栏,内容如对您有帮助，希望把文章链接给更多的朋友！

query 传参方式①

传递方组件

home.vue

<template><div class='c'> <p>query传参</p> <el-button type="success" @click="toList"> to list</el-button></div></template><script lang='ts' setup>import { ref } from 'vue'// 1 引入路由跳转方法useRouterimport { useRouter } from 'vue-router'// 2 拿到实例const router = useRouter()// 3 ref定义基本类型数据const name = ref('梨花白')// 4 query传参const toList = ()=>{ router.push({ //这种对象式传参写法 query除开和path搭配外还可以和name一起使用 path:'/list', //或者这样 path和name任选其一 //name:'List', query:{ name:name.value } })}</script><style scoped>.c{ width: 80%; padding: 20px; margin: 0 auto; border:1px solid red;}.c>p>span{ color:coral;}</style>

看下 router/index.ts 文件

import { createRouter,createWebHistory,RouteRecordRaw } from 'vue-router'const routes:Array<RouteRecordRaw> = [ { path:'/', component:()=>import('../pages/home.vue') },{ path:'/home', name:'Home',//路由命名 component:()=>import('../pages/home.vue') },{ path:'/list', name:'List',//路由命名 为路由跳转作准备 component:()=>import('../pages/list.vue') },{ //定义404页面 path:'/404', component:()=>import('../pages/notfound.vue') },{ //匹配未定义路由 然后重定向至404页面 path:'/:pathMath(.*)', redirect:'/404' }]const router = createRouter({ routes, history:createWebHistory()})export default router

有两个注意点

① ref定义响应式基本类型数据后，修改和赋值要带上 .value

② query是一个对象类型 所以我们定义的基本类型数据不能直接赋值 要给对象式写法 {}

像以下两种写法都是报错的

<script lang='ts' setup>import { ref } from 'vue'// 1 引入路由跳转方法useRouterimport { useRouter } from 'vue-router'// 2 拿到实例const router = useRouter()// 3 ref定义基本数据const name = ref('梨花白')// 4 query传参const toList = ()=>{ router.push({ path:'/list', query:name //报错 不能将类型“Ref<string>”分配给类型“LocationQueryRaw”。 //类型“Ref<string>”中缺少类型“string”的索引签名 })}</script><script lang='ts' setup>import { ref } from 'vue'// 1 引入路由跳转方法useRouterimport { useRouter } from 'vue-router'// 2 拿到实例const router = useRouter()// 3 ref定义基本数据const name = ref('梨花白')// 4 query传参const toList = ()=>{ router.push({ path:'/list', query:name.value //报错 不能将类型“string”分配给类型“LocationQueryRaw” })}</script>

接收方组件

list.vue

<template><div class='c'> <p>query接参</p> <!-- 4 展示数据 --> <p>name: <span>{{ name }}</span></p></div></template><script lang='ts' setup>// 1 引入useRoute路由信息方法import { useRoute } from 'vue-router'// 2 获取实例const route = useRoute()// 3 解构赋值const { query:{name} } = route</script><style scoped>.c{ width: 80%; padding: 20px; margin: 0 auto; border:1px solid red;}.c>P>span{ color:coral;}</style>

效果：

动态效果：

 以上 我们可以得知 当使用query传参时，参数的详细内容都会在地址栏完整的展示出来。

这对于数据安全来说是致命的

当然也有它自有的优势：刷新不会丢失数据

下面看看使用query传参的另一种形式：？传参

query 传参方式②

传递方组件

home.vue

<template><div class='c'> <p>query传参</p> <el-button type="success" @click="toList"> to list</el-button></div></template><script lang='ts' setup>import { toRefs,ref,reactive } from 'vue'// 1 引入路由跳转方法useRouterimport { useRouter } from 'vue-router'// 2 拿到实例const router = useRouter()// 3 ref定义基本数据const name = ref('桃花夭')// 4 query ?传参 const toList = ()=>{ router.push('/list?name=' + name.value) //也可以使用ES6里的模板字符串 //router.push(`/list?name=${name.value}`)}</script><style scoped>.c{ width: 80%; padding: 20px; margin: 0 auto; border:1px solid red;}.c>p>span{ color:coral;}</style>

效果：

 动态效果：

两者效果别无二致 也有同学说我在传入引用类型数据时老是报错 怎搞嘞

好的 下面开始传递引用类型数据

传递方组件

home.vue

<template><div class='c'> <p>query传参</p> <el-button type="success" @click="toList"> to list</el-button></div></template><script lang='ts' setup>import { ref,reactive } from 'vue'// 1 引入路由跳转方法useRouterimport { useRouter } from 'vue-router'// 2 拿到实例const router = useRouter()// 3 定义数据接口类型interface props { id:number, content:string}// 4 reactive定义引用类型数据const arr:props[] = reactive([ { id:1, content:'关山难越，谁悲失路之人？' },{ id:2, content:'萍水相逢，尽是他乡之客！' }])// 4 或这样// const arr = reactive([// {// id:1,// content:'关山难越，谁悲失路之人？'// },{// id:2,// content:'萍水相逢，尽是他乡之客！'// }// ] as props[])// 5 query ?传参 const toList = ()=>{ router.push('/list?arr=' + JSON.stringify(arr)) //也可以使用模板字符串 // router.push(`/list?arr=${JSON.stringify(arr)}`)}</script><style scoped>.c{ width: 80%; padding: 20px; margin: 0 auto; border:1px solid red;}.c>p>span{ color:coral;}</style>

接收方组件

list.vue

<template> <div class="c"> <p>query接参</p> <!-- 4 展示数据 --> <p v-for="item in arr" :key="item.id"> <span>{{ item.content }}</span> </p> </div></template><script lang="ts" setup>// 1 引入useRoute方法import { useRoute } from "vue-router";// 2 获取实例const route = useRoute();// 3 使用JSON.parse()方法把传过来的字符串参数转回对象const arr = JSON.parse(route.query.arr as string);</script><style scoped>.c { width: 80%; padding: 20px; margin: 0 auto; border: 1px solid red;}.c > P > span { color: coral;}</style>

效果：

动态效果：

所以是

在使用？传参传入引用类型数据时 传递时要使用JSON.stringify()方法转成字符串类型

在接收时 要使用JSON.parse()方法再转回最初的类型

易错点如下：

 query 传参方式③

其实也就是