如何在vue3+ts项目中使用query和params传参

更新时间：2023年04月18日 10:35:00 作者：小明不在家

Vue3中的路由传参有两种方式:query和params,下面这篇文章主要给大家介绍了关于如何在vue3+ts项目中使用query和params传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一 query 传参（类似get请求）

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 引入路由跳转方法useRouter
import { 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 引入路由跳转方法useRouter
import { 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 引入路由跳转方法useRouter
import { 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 引入路由跳转方法useRouter
import { 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 引入路由跳转方法useRouter
import { 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 传参方式③

其实也就是声明式路由跳转时带参

传递方组件

home.vue

<template>
 
<div class='c'>
    <p>query传参</p>
    <router-link 
    //to的对象式写法 与编程式路由跳转传参的对象式写法相对应
    :to="{
        path:'/list',
        //或 name:'List'
        query:{
            arr:JSON.stringify(arr)
        }
    }">
    <el-button type="success"> to list</el-button>
</router-link>
 
//<router-link 
    //to的字符串写法 与编程式路由跳转的？传参写法相对应
//    :to="`/list?arr=${JSON.stringify(arr)}`">
//    <el-button type="success"> to list</el-button>
//</router-link>
    
</div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义数据接口类型
interface props {
    id:number,
    content:string
}
// 4 ref定义基本数据 但未定义数据类型
const arr:props[] = reactive([
    {
        id:1,
        content:'关山难越，谁悲失路之人？'
    },{
        id:2,
        content:'萍水相逢，尽是他乡之客！'
    }
])
// 4 或这样
// const arr = reactive([
//     {
//         id:1,
//         content:'关山难越，谁悲失路之人？'
//     },{
//         id:2,
//         content:'萍水相逢，尽是他乡之客！'
//     }
// ] as props[])
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

效果：

二 params 传参（类似post请求）

params 传参方式①

传递方组件

home.vue

<template>
 
 <div class="c">
    <p>params 传参</p>
    <el-button type="warning" @click="toList"> to list page</el-button>
 </div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本类型数据 
const str = ref('月出于东山之上，徘徊于斗牛之间。')
// 4 params 传参 只能搭配name使用 path会忽略params带参
const toList = ()=>{
    router.push({
        name:'List',
        params:{
            str:str.value
        }
    })
}
</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>params接参</p>
    <!-- 4 展示数据 -->
    <p>str: <span>{{ str?str:'刷新我就不见啦！' }}</span></p>
  </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 解构赋值 刷新页面 参数丢失 
const { params:{str} } = route;
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

在使用params传参时参数详情在请求体里不会展示在地址栏中这对数据安全来说是友好的

但弊端就是刷新页面数据丢失

其实在实际项目里，数据多是请求数据赋值来的

所以接下来我们尝试home.vue组件里请求数据后传递给list.vue组件展示数据

传递方组件

home.vue

<template>
 
 <div class="c">
    <p>params 传参</p>
    <el-button type="warning" @click="toList"> to list page</el-button>
 </div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 引入接口
import { tt } from '../request/api'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义接口数据
interface props {
    userId:number,
    city:string,
    address:string,
    name:string,
    zip:number,
    region:string,
    date:string
}
// 4 reactive定义数据
let list:props[] = reactive([])
// 5 params 传参 必须搭配name使用 path会忽略params带参
const toList = ()=>{
    tt().then((res:any)=>{
        if(res && res.data.code === 200){
            list = res.data.data.list
            router.push({
        name:'List',
        params:{
            list:JSON.stringify(list)
        }
    })
        }else{
            alert(res.data.msg)
        }
    })
    
}
</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>params接参</p>
    <!-- 4 展示数据 -->
    <div class="c" v-for="item in list" :key="item.userId">
          <p>名称：<span>{{ item.name }}</span></p>
          <p>城市：<span>{{ item.city }}</span></p>
          <p>地区：<span>{{ item.region }}</span></p>
          <p>地址：<span>{{ item.address }}</span></p>
          <p>日期：<span>{{ item.date }}</span></p>
          <p>编号：<span>{{ item.zip }}</span></p>
      </div>
      </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 声明赋值 刷新页面 参数丢失 这里报错
const  list  = JSON.parse(route.params.list as string);
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

那我们在使用params传参时如何避免页面刷新导致参数丢失问题呢？

那就是 params 的第二种传参方式了：动态路由传参

params 传参方式②

1 既然名叫动态路由传参那首先第一步就是在router/index.ts里配置动态路由

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/:arr',//接收方路由配置
        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

2 传递方组件

home.vue

<template>
 
 <div class="c">
    <p>params 传参</p>
    <el-button type="warning" @click="toList"> to list page</el-button>
 </div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 引入接口
import { tt } from '../request/api'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义接口数据
interface props {
    userId:number,
    city:string,
    address:string,
    name:string,
    zip:number,
    province:string,
    date:string
}
// 4 ref定义基本数据 但未定义数据类型
let list:props[] = reactive([])
// 5 params 传参 必须搭配name使用 path会忽略params带参
const toList = ()=>{
    tt().then((res:any)=>{
        if(res && res.data.code === 200){
            list = res.data.data.list
            router.push({
        name:'List',
        params:{
            //动态路由配置/:arr 这里就是arr
            arr:JSON.stringify(list)
        }
    })
        }else{
            alert(res.data.msg)
        }
    })
    
}
</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>params接参</p>
    <!-- 4 展示数据 -->
    <div class="c" v-for="item in list" :key="item.userId">
          <p>名称：<span>{{ item.name }}</span></p>
          <p>城市：<span>{{ item.city }}</span></p>
          <p>地区：<span>{{ item.region }}</span></p>
          <p>地址：<span>{{ item.address }}</span></p>
          <p>日期：<span>{{ item.date }}</span></p>
          <p>编号：<span>{{ item.zip }}</span></p>
      </div>
      </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 声明赋值 刷新页面 参数不会丢失
const  list  = JSON.parse(route.params.arr as string);
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

可！这和query传参有毛区别？参数都会在地址栏显示

从效果上看是这样的没有区别

只是query传参有长度限制，而params无

params的声明式路由跳转传参就不赘述了，会了编程式路由跳转传参，那声明式就不在话下。

注意query和path或name都可搭配使用，而params只能和name搭配就行了

在尝试写vue3+ts项目时，遇到的绝大多数问题都是数据类型定义相关的也就是ts问题突出

都说any大法好，这也就失去了类型限定即ts的意义这又和js毫无分别了

所以ts还是重点学习的方面

最后提醒一句：

如果你在vue3+ts项目里使用params传参时，尽管代码核实几遍都是对的，可还是报错，

那可能不是你的问题，尝试下载 vue-router@4.0.1 版本，然后重启项目，你可能就惊奇的发现

参数就这么展示在自己眼前了

总结

到此这篇关于如何在vue3+ts项目中使用query和params传参的文章就介绍到这了,更多相关vue3+ts用query和params传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue router 跳转时打开新页面的示例方法
这篇文章主要介绍了vue router 跳转时打开新页面的示例方法，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
vue父子组件的嵌套的示例代码
本篇文章主要介绍了vue父子组件的嵌套的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue修饰符的使用详解
为了方便大家写代码，Vue给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等，这篇文章将给大家分享Vue 中的常用的修饰符
2022-10-10
vue3+ts代理的使用
本文主要介绍了vue3+ts代理的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-12-12
Vue项目实现token无感刷新的示例代码
最近在使用系统的过程中，业务人员反馈刚登录一会就提示token过期需要重新登录，所以本文为大家分享一个无感刷新的实现代码，需要的可以参考下
2023-07-07
vue+Java后端进行调试时解决跨域问题的方式
今天在开发中遇到有点小问题，vue+Java后端进行调试时如何解决跨域问题，下面小编给大家分享解决方法，感兴趣的朋友一起看看吧
2017-10-10
实现vue图片缩放方式-拖拽组件
这篇文章主要介绍了实现vue图片缩放方式-拖拽组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
在vue中实现PDF文件流预览功能
这篇文章主要为大家详细介绍如何在vue中实现PDF文件流预览功能,文中的实现步骤讲解详细,对大家的学习或工作具有一定的参考价值,需要的可以参考一下
2023-12-12
ElementUI多个子组件表单的校验管理实现
这篇文章主要介绍了ElementUI多个子组件表单实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue结合el-dialog封装自己的confirm二次确认弹窗方式
这篇文章主要介绍了vue结合el-dialog封装自己的confirm二次确认弹窗方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-08-08